Tooltip mispositioned when Y-axis is reversed #13780
Description
Description
By default, the tooltip should be positioned to avoid the portion of the graph that it's describing. Normally this works, even with a stacked bar chart.
However, if you reverse the axis direction, the tooltip's anchor point doesn't reverse with it. So the tooltip overlaps precisely the data that it's describing.
Live demo with steps to reproduce
https://jsfiddle.net/1000autumns/hqnb1rzu/7/
(I'm sorry about the minified code, I tried for 10 minutes to get the exported JSON to work in JSFiddle, but it kept failing.)
To reproduce:
- Save this to a file, say
chart.json:
{"template":{"chart":{"type":"column","inverted":true,"polar":false},"plotOptions":{"series":{"stacking":"percent"}}},"options":{"title":{"text":""},"subtitle":{"text":""},"series":[{"data":[["1",9],["2",33],["3",7],["4",3]],"name":"A","turboThreshold":0},{"data":[["1",26],["2",21],["3",50],["4",24]],"name":"b","turboThreshold":0},{"data":[["1",35],["2",17],["3",28],["4",39]],"name":"c","turboThreshold":0},{"data":[["1",20],["2",14],["3",7],["4",25]],"name":"d","turboThreshold":0},{"data":[["1",2],["2",3],["3",1],["4",2]],"name":"e","turboThreshold":0},{"data":[["1",8],["2",12],["3",7],["4",7]],"name":"Don't know","turboThreshold":0}],"plotOptions":{"series":{"dataLabels":{"enabled":true}}},"data":{"csv":"\" \";\"A\";\"b\";\"c\";\"d\";\"e\";\"Don't know\"\n1;9;26;35;20;2;8\n2;33;21;17;14;3;12\n3;7;50;28;7;1;7\n4;3;24;39;25;2;7"},"yAxis":[{"title":{"text":""},"labels":{"format":"{value}%"},"reversed":true,"type":"linear"}],"xAxis":[{"reversed":false,"type":"category"}],"colors":["#004976","#33A9B4","#4D96C3","#007681","#53565A","#86898D","#e4d354","#2b908f","#f45b5b","#91e8e1"],"credits":{"text":"","href":""},"tooltip":{"valueSuffix":"%"},"pane":{"background":[]},"responsive":{"rules":[]}},"customCode":"/*\n// Sample of extending options:\nHighcharts.merge(true, options, {\n chart: {\n backgroundColor: \"#bada55\"\n },\n plotOptions: {\n series: {\n cursor: \"pointer\",\n events: {\n click: function(event) {\n alert(this.name + \" clicked\\n\" +\n \"Alt: \" + event.altKey + \"\\n\" +\n \"Control: \" + event.ctrlKey + \"\\n\" +\n \"Shift: \" + event.shiftKey + \"\\n\");\n }\n }\n }\n }\n});\n*/","theme":false,"settings":{"constructor":"Chart","dataProvider":{"csv":"\" \";\"A\";\"b\";\"c\";\"d\";\"e\";\"Don't know\"\n1;9;26;35;20;2;8\n2;33;21;17;14;3;12\n3;7;50;28;7;1;7\n4;3;24;39;25;2;7","googleSpreadsheet":false,"liveData":false}}}
- Visit editor.highcharts.com and open the
chart.json. - You can see the issue right away. To make it work correctly, uncheck Customize Chart > Advanced > Y Axis > Y Axis[0] > Reversed.
Product version
Highcharts 8.1.2, the current version
Affected browser(s)
All.