React-chartjs-2: Hover is offset when using CSS zoom.

Created on 8 Nov 2017 · 1Comment · Source: reactchartjs/react-chartjs-2

I've zoomed out my whole webpage using CSS zoom. However I notice now that the tooltip appears now at offset location of the true data point. Is there anyway to fix this?

Source

sjorsvanheuveln

Most helpful comment

Ok, I've found a solution. (It is better that I not use zoom at all in my body, but currently I have to.)
I set the zoom again for the wrapping div of the chart to the inverse of the zoom that was applied to the page.

So my body is styled like this:

body {
  zoom: 0.8;
}

And with inline styling on the wrapper div I did this:

<div style={{ zoom: (1 / 0.8) }}>
  <Bar data={data} options={options} />
</div>

So I've used the inverse of the zoom here, in my case 1 / 0.8. You could also apply this in CSS, performing a calculation ( I believe this is possible in CSS3).

sjorsvanheuveln on 8 Nov 2017

🎉4

>All comments

So my body is styled like this:

body {
  zoom: 0.8;
}

And with inline styling on the wrapper div I did this:

<div style={{ zoom: (1 / 0.8) }}>
  <Bar data={data} options={options} />
</div>

So I've used the inverse of the zoom here, in my case 1 / 0.8. You could also apply this in CSS, performing a calculation ( I believe this is possible in CSS3).

sjorsvanheuveln on 8 Nov 2017

🎉4

Was this page helpful?

0 / 5 - 0 ratings