highcharts / highcharts

Highcharts JS, the JavaScript charting framework
https://www.highcharts.com
Other
12.04k stars 3.63k forks source link

Tooltip > 'callout' goes behind the Y Axis title text #10939

Closed AntonyJos closed 5 years ago

AntonyJos commented 5 years ago

Expected behaviour

Hovering on the series datapoints, tooltip goes behind behind Y Axis titles

Actual behaviour

All the tooltip 'callout' should be displayed over the Y Axis title so that the values along with series name can be seen at all times.

Live demo with steps to reproduce

https://jsfiddle.net/jt8qagho/

Ensure (yAxisTiTle).useHTML and (seriesToolTip).useHTML to be true

tooltip cropped

Product version

Highstock - 7.1.2

Affected browser(s)

Only tested out in Google Chrome - ^74.0.x

pawelfus commented 5 years ago

Hi @AntonyJos

Thanks for reporting the issue. This is known limitation when using HTML labels. See docs: https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting

Apart from tooltip.outside option, you can set tooltip.useHTML: https://jsfiddle.net/BlackLabel/nk5bsh71/2/ - now simply disable build-int SVG styles and apply your own in CSS: https://jsfiddle.net/BlackLabel/nk5bsh71/6/