All geek questions in one place

High quality tooltip not displayed

I have a large dispersion and bar chart. I can’t see the hint of the scatter point that is above the bar ... here is the fiddle http://jsfiddle.net/tZ9Rt/

I use these two series:

series: [{ type: 'scatter', index:2, data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], name: 'Temperature' }, { type: 'column', index:1, data: [220,220,220,220,120,220,220,220,220,220,220,220], name: 'Rainfall' }]

Any help is much appreciated ...

thanks

+4
source share
3 answers

Make your tooltip common and change the type series to 'line' and lineWidth to 0 . Then you will have a “line” diagram that looks like a scatter plot, but tooltips work!

 tooltip: { shared: true //make the tooltip accessible across all series }, plotOptions: { line: { lineWidth: 0 //make the lines disappear } }, series: [{ type: 'column', name: 'Column Data', data: [5, 4, 3, 2, 1, 0] }, { type: 'line', //this is a 'fake' scatter plot name: 'Pseudo-scatter', data: [0, 1, 2, 3, 4, 5] }]
+9
source

The reason you cannot view the tooltip for the scatter points above the strip is because the stroke gets focus in front of the scatter point. The panel will maintain the focus of the tooltip until the mouse is no longer above the panel. You can always use a general hint, as in this example . Through this, all data associated with the category that your mouse is running over will be shown. Here is the relevant code:

 tooltip: { shared: true },
0
source

Source: https://habr.com/ru/post/1440776/

More articles:


All Articles