Chart.js: Tooltip in line chart get buged when is rotated the graph

Created on 6 Jul 2020  路  1Comment  路  Source: chartjs/Chart.js

Hello, thank you so much for this library, i am getting an small error when i rotate the div wich is containing the graph the tooltips doesn鈥檛 works as espected.

https://jsfiddle.net/Hongbo_Miao/mvct2uwo/3/

Please add in the css:

myChart{

transform: rotate(270deg) !important;
}

bug

Most helpful comment

It's not a Chart.js' bug.
CSS transform has a specific point to rotate its objects, and its dimensions does not impact other elements.

You can try something like:

#myChart {
padding: 50px;
position: absolute;
-ms-transform: rotate(270deg); /* IE 9 /
-ms-transform-origin: 60% 65%; /
IE 9 */
transform: rotate(270deg);
transform-origin: 60% 65%;
}

and adapt it to your necessities.

>All comments

It's not a Chart.js' bug.
CSS transform has a specific point to rotate its objects, and its dimensions does not impact other elements.

You can try something like:

#myChart {
padding: 50px;
position: absolute;
-ms-transform: rotate(270deg); /* IE 9 /
-ms-transform-origin: 60% 65%; /
IE 9 */
transform: rotate(270deg);
transform-origin: 60% 65%;
}

and adapt it to your necessities.

Was this page helpful?
0 / 5 - 0 ratings