I'm drawing a scatter chart where I can have some points at the same coordinates. In this situation, I would like to do the following:
1) Draw a number on top of the dot to inform users there are multiple points overlapping
2) On mouse over the point, display a tooltip to show the list of points overlapping
I'm using Highcharts in a React/Typescript environment.
I've managed to almost get to my first requirement. On the render function, I iterate over all of my points and those that have overlapping data, I do this:
Code: Select all
render: function () {
let chart = this;
for (let i = 0; i < chart.series[0].points.length; i++) {
let pp = chart.series[0].points[i] as any;
let plotX = pp.plotX;
let plotY = pp.plotY;
pp.textCircle = chart.renderer
.label("3", plotX + chart.plotLeft, plotY + chart.plotTop, 'circle', plotX + chart.plotLeft, plotY + chart.plotTop)
.css({
color: 'white',
})
.attr({
fill: 'rgba(255, 0, 0, 1)',
zIndex: 10,
r: 5
})
.add();
Once the circle is drawn with the number in it, I would like to display a tooltip next to it with the list of overlapping points.
I'm already using the tooltip of my chart when I have a single point displayed with a marker. I'd like to use the same tooltip when I have rendered points from the code above.
I can't figure out how to tie the Svg being renderer above to the tooltip configured in my chart.
Would someone know how to do this? Rewriting a tooltip for each point and managing the mouse events (mouse enter, mouse leave) is an endeavor I don't want to take.