Highcharts: Tooltip ignores transform: scale

[kzoon]

When I use transform: scale, the tooltips ignore this.
See http://jsfiddle.net/kzoon/v3aa8/
The mouseover on december points display the august tooltips

[kzoon]

Can you please advise me if you consider this a bug that will be fixed eventually? If not I will have to start thinking about a workaround...

[TorsteinHonsi]

See the discussion at #1753. The problem is that there are a number of ways of setting the zoom, which will affect positioning of the container as well as the points within the container. At #1753 there is a proposal for a workaround that may be adapted to transform:scale as well.

[kzoon]

closed by accident

[kzoon]

I implemented my own workaround using #1753. Thanks for the example.

Maybe it's a good idea to introducing a Zoom option in chart?

[pawelfus]

Well, there is one, see: http://api.highcharts.com/highcharts#chart.zoomType

[kzoon]

That is not what I meant. #1753 states:
"The zoom CSS property isn't reliably supported across browsers, also there are other ways of zooming the div, like using scale transform. The zoom can also be performed higher up in the DOM tree. All this makes it hard to detect it reliably."
But I DO know the amount of scaling. If I could set this to an option on chart (which results in adjusting e.chartX and e.chartY like in example http://jsfiddle.net/highcharts/BD3R7), it would be very helpful.

so instead of trying to dertermine the amount of zoom/scaling, you would require the user to set it himself.

[Thirteen09]

I've run into this problem too. Do you have some kind of solution?
Can you fasten fixing this bug? We use scale all over our application and have tool-tips show in wrong places all over it. The discussion at #1753 does not help in our case.

[kzoon]

I use this workaround:

HighCharts.wrap(HighCharts.Pointer.prototype, 'normalize', function (proceed, event, chartPosition) {
    var e = proceed.call(this, event, chartPosition);

    var element = this.chart.container;
    if (element && element.offsetWidth && element.offsetHeight) {

        var scaleX = element.getBoundingClientRect().width / element.offsetWidth;
        var scaleY = element.getBoundingClientRect().height / element.offsetHeight;
        if (scaleX !== 1) {
            e.chartX = parseInt(e.chartX / scaleX, 10);
        }
        if (scaleY !== 1) {
            e.chartY = parseInt(e.chartY / scaleY, 10);
        }

    }
    return e;
});

[oriko]

Hi

In my case I am using zoom css for all the application bode.
For some reason the workaround that you are using not working in this case. Can you suggest me what to change in your function in order to get it work.

Thanks,

[kzoon]

No. This fiddle http://jsfiddle.net/0qppo7yr/ implements my workaround. There it works to prevent problems due to transform: scale(0.7) in the css

[dmitrygorbenko]

Hi guys,

any update on this thread ?
Can the patch provided by user kzoon be applied ?

thanks,
Dima

[TorsteinHonsi]

Yes, the drop-in fix seems to work well with the current version, but it will most likely fail with old browsers that don't implement the getBoundingClientRect API.

[dmitrygorbenko]

yes, you are right !

[kzoon]

Not solved in Highcharts 5. My workaround still works.

[KonstantinJahnel]

@kzoon your fix seems to work perfectly fine in Firefox and IE but i can't get it running in Chrome?
Any idea why?

[starquake]

For me the fix works perfectly fine. Does the fiddle work?

What issues do you have?

[starquake]

@TorsteinHonsi The browsers that do not support getBoundingClientRect() also do not support transform: scale

Maybe knowing that helps to make a better fix.

http://caniuse.com/#feat=getboundingclientrect
http://caniuse.com/#feat=transforms2d

Hint: click 'show all' to show all browsers.

[KonstantinJahnel]

@starquake im such a fool,
it has to be my mistake, tried the fiddle out and it works perfect.

Where should i implement the fix tho?
right now it's $(...fix...); after my prototypes in the main.js

[starquake]

@KonstantinJahnel I can't possibly answer that without knowing more about your software. I'm sorry, I can't help you with that.

[balkarov]

Why did not fix it in highcharts?

[Organizer21]

Hi all, I just ran into this issue as well due to trying to add a highchart element using revealJS (which I believe uses CSS scale to nicely zoom in and out as needed). https://revealjs.com.

It seems that the fix posted here works partly; it works when I zoom out and make it smaller and up to 1:1 scale (Chrome), however when I zoom in and expanded it does not work. Here's a codepen that easily illustrates the issue. At glance I think it works both ways in FF.

https://codepen.io/anon/pen/GxzPKq

@starquake @kzoon does it make sense the fix is not working fully in Chrome - did anyone manage to improve upon it or why would it work only one direction? @TorsteinHonsi is there any plans for a proper or more formal fix as it seems this thread's been quite for some time?

Update: It seems RevealJS is using Zoom after 1:1 as to why up-scaling don't work in Chrome for the codepen above (I presume FF supports that better?). Forcing RevealJS it to use only transform scale is possible, but it results is highly muddy text and graphs (while zoom did not). Not sure if there's some way to adapt the workaround provided in here to also work with zoom for Chrome as the HighChart tool-tip works similarly bad with it.

[Llorx]

I'm thinking on 3 ways to fix this problem, being the last one the one I like most. Here they go:

To overcome this, I think that you can do getBoundingClientRect (which take into account the transformations) on each point after redrawing them, caching the result and using the cache as the bounding box to detect the collisions.

The other way will be to traverse through all the parents processing the getComputedStyle transforms of each element, and internally apply the scaling/translation to the mouse events. The problem here is to process the skew or 3d transformations.

And finally another performant way can be to getBoundingClientRect one time (on each redraw) the chart container and compare it to the actual chart size. With this you get the scale applied. Simply apply that scale to each mouse event. This method also don't takes into account skew or 3d transformations, but can be a fast fix to have scaling covered.

[Llorx]

Pull request here with a PoC of the last fix I mentioned: https://github.com/highcharts/highcharts/pull/8634

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[balkarov]

Hello.

THis is does not work after rescale
http://jsfiddle.net/gskm3dj2/

[sebastianbochan]

@balkarov,
The issue has been already reported there: https://github.com/highcharts/highcharts/issues/12489