highcharts / highcharts

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

Tooltip mispositioned when Y-axis is reversed #13780

Closed nk9 closed 3 years ago

nk9 commented 4 years ago

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.

Screenshot 2020-06-26 at 18 11 35

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.

Screenshot 2020-06-26 at 18 13 11

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:

  1. 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}}}
  1. Visit editor.highcharts.com and open the chart.json.
  2. 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.

pawelfus commented 4 years ago

Thank you for reporting the issue @nk9

Simplified demo: https://jsfiddle.net/BlackLabel/9b0urvk7/

Internal note: Actually we have two bugs here: