search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.29k stars 1.15k forks source link

The tooltips position is wrong when used with Gridster 2 #1382

Open webarp opened 4 years ago

webarp commented 4 years ago

Hi,

Has anyone tried to integrate the charts into gridster 2?

https://github.com/tiberiuzuld/angular-gridster2

I'm trying to do this and everything works just fine except the tooltips.

The tooltips position is calculated using getBoundingClientRect() and somehow, when integrated in gridster, the position is wrong.

The gridster items position is based on css transform. This seems to be the problem but not the only one.

I cannot figure out how to make this work.

I hope someone can help.

Thank you.

AG

webarp commented 4 years ago

I have found the solution, just in case someone has the same problem.

Indeed, it's a tooltip position calculation compatibility issue. It doesn't calculate properly if the gridster is using transform to position the elements.

The solution was quite easy.

The gridster has options and one of them is useTransformPositioning.

It was true by default. I've set it to false and it doesn't use transform anymore to position the elements.

The tooltips are working properly now.

megla-cschroepfer commented 1 year ago

I have this exact same issue. My only problem is that I am developing a widget for the ThingsBoard platform which also uses gridster for positioning the widgets. Therefore, I cannot simply set useTransformPositioning to false. Is there any other solution?