ChartsCSS / charts.css

Open source CSS framework for data visualization.
https://ChartsCSS.org
MIT License
6.17k stars 175 forks source link

place tooltip above line of line chart, otherwise fall back to default #128

Open filmaj opened 2 months ago

filmaj commented 2 months ago

Thanks for the great library!

I was trying to think of ways of positioning the tooltip in a more convenient place when in line charts, as the default positioning is always 50%; depending on the actual chart, this may not be ideal:

Screenshot 2024-05-01 at 21 53 16

(the line chart/tooltip interaction in Firefox also has some rendering problems, as you can see chart segments to the right of the tooltip render "over" the tooltip, but that is a separate issue!)

In this PR, I suggest to use calc() to calculate the maximum of --start and --end variables, and multiply it by 100%, to change the tooltip position so that it always renders above the line:

Screenshot 2024-05-01 at 21 52 59

It might need a bit more padding, as you can see the "tail" of the tooltip is just slightly below the line segment still, but, I believe it is an improvement.

Also, using var()'s second parameter, the fallback parameter, we can fall back to using a value of 0.5 * 100% = 50%, which is the default (current) value today. In this way, I don't think this change should affect chart types other than line charts.