Mouseover Position wrong when char is in a scaled div

[jogibear9988]

Describe the bug
Host the chart in a div wich has a scale applied (for example transform: scale(1.5) then when you move the mouse over the chart, the position is wrong.

To Reproduce
Steps to reproduce the behavior:

1. Go to http://nhn.github.io/tui.chart/latest/tutorial-example08-01-line-chart-basic
2. Open the Dev-tools
3. Go to the div with id : 'chart-area'
4. Add style : 'transform: scale(1.5)'

Expected behavior
Mouse position should be correct

[jung-han]

Thanks for the bug reporting!
I checked the issue. It looks like a simple problem, if you are interested, please also PR.

[jogibear9988]

@jung-han

Don't think is a so simple problem.
Apex Charts has the same: apexcharts/apexcharts.js#1991

I tried to work on it on apex charts, but didn't have time to finish it.

Problem is, not only "transform" css property has an effect, also "zoom". Then also the chart could be hosted in a webcomponent, wich need to be thought of.
I've worked on similar problems at my project here: https://github.com/node-projects/web-component-designer
But at the moment, I've not yet found a good solution to correct the mouse positions.

[jung-han]

@jogibear9988
Fixed in 4.1.4!
https://github.com/nhn/tui.chart/releases/tag/v4.1.4

[stale]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[jogibear9988]

thx