lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Tie SVG points to the chart tooltip

Hi,

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();
In the code above, my only issue is that the 'circle' symbol stretches itself as an ellipse. Based on the text passed in the first parameter, it extends itself. Would someone know how to force the radius of the circle to stay fixed?

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.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tie SVG points to the chart tooltip

Hello,

Highcharts have a marker-clusters module that somewhat suits your requirements. Additionally, using tooltip.clusterFormat, you can change the text displayed for it (in the API, next to this property, there is also an example using fotmatter).

Demo: https://jsfiddle.net/gh/get/library/pur ... ters/basic
Docs: https://www.highcharts.com/docs/advance ... r-clusters
API: https://api.highcharts.com/highcharts/t ... sterFormat

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: Tie SVG points to the chart tooltip

Thank you for the quick reply Michal.

I had checked marker-clusters in the past. I can't remember why I passed on this solution.

Giving it a second though and I think it would solve my problem.

I've tried the demo you shared. I wondered if I'm stuck with the 'ripple' effect on a marker with a cluster of points. Is there a way to display a solid dot just like for single point?

I didn't know about the tooltip formatted for clustered point so I'll give it a try.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tie SVG points to the chart tooltip

Hi,
Giving it a second though and I think it would solve my problem.
I'm glad to hear that it helped.
Is there a way to display a solid dot just like for single point?
Yes, you can change the marker symbol with the series.scatter.cluster.marker.symbol property.

Demo: https://jsfiddle.net/BlackLabel/zmb8oLsv/
API: https://api.highcharts.com/highcharts/s ... ker.symbol

In case of any further questions, feel free to contact us again.
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: Tie SVG points to the chart tooltip

Hi Michal,

I'm almost there in the sense that I understand your code samples but there's a few little differences as I'm using Highcharts in a React Single Page App (SPA) with Typescript.

May I ask for your help again to help me pinpoint what I am missing in my configuration?

For example, in your code sample (https://jsfiddle.net/BlackLabel/zmb8oLsv/), the cluster property is set under the plotOptions.series. In my code, it doesn't allow me to put it there. I have to put it under plotOptions.scatter.cluster according to this API page (https://api.highcharts.com/highcharts/p ... er.cluster)

My plotOptions block looks like this:

Code: Select all

        plotOptions: {
            series: {
                turboThreshold: 0,
                states: {
                    hover: {
                        enabled: false
                    }
                },
            },
            scatter: {
                marker: {
                    radius: 5,
                    symbol: 'circle',
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                },
                cluster: {
                    enabled: true,
                    minimumClusterSize: 2,
                    allowOverlap: true,
                    marker: {
                        symbol: 'square',
                    },
                    layoutAlgorithm: {
                        type: 'grid',
                        gridSize: 50
                    },
                    dataLabels: {
                        enabled: true,
                        style: {
                            fontSize: '8px'
                        },
                        y: -1
                    },
                    zones: [{
                        from: 1,
                        to: 200,
                        marker: {
                            fillColor: '#00ff00',
                            radius: 20
                        }
                    }],
                },
                states: {
                    hover: {
                        enabled: false
                    }
                },
                animation: {
                    defer: 0,
                    duration: 0,
                }
            },
        },
The configuration above does not work. I'm not seeing any green square (the fillColor of my only cluster) on my scatter plot chart.
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: Tie SVG points to the chart tooltip

I'm posting a second part of my message because the page was preventing me from posting a very long message

Reading this documentation (https://www.highcharts.com/docs/advance ... stallation), it gave me the impression the cluster module is an add-on where I should do some kind of import. The code sample you provided does give this hint as you put:

https://code.highcharts.com/modules/marker-clusters.js

I'm building a React Single Page App (SPA) with Highcharts. Looking through the web, it seems I should do the following:

Code: Select all

import * as Highcharts from 'highcharts';
import HighchartMore from 'highcharts/highcharts-more';
and after the imports, I call

Code: Select all

HighchartMore(Highcharts);
But it didn't work.

Finally, I'm running also into some issues with the tooltip. The property tooltip.clusterFormat is of type string in the documentation (https://api.highcharts.com/highcharts/t ... sterFormat) but in my Typescript application, it asks for an object. I created a new object around the string but it isn't shown:

Code: Select all

clusterFormat: new Object('Clustered points: {point.clusterPointsAmount}'),
I dug the highcharts.d.ts file for more documentation on how to use the tooltip.formatter with clustered points. In the highcharts.d.ts file, it summary-passed
The cluster tooltip can be also formatted using `tooltip.formatter`
* callback function and `point.isCluster` flag.
I tried accessing point.isCluster but Typescript doesn't compile this property. Would you know how I can call this property to know if the point is clustered?

I feel I'm almost there to activate clusters in my chart Michal. If you could just give me a bit more guidance for my specific technologies (React, Typescript), that would be greatly appreciated.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tie SVG points to the chart tooltip

Hello,
I'm building a React Single Page App (SPA) with Highcharts. Looking through the web, it seems I should do the following:

Code: Select all

import * as Highcharts from 'highcharts';
import HighchartMore from 'highcharts/highcharts-more';
and after the imports, I call

Code: Select all

HighchartMore(Highcharts);
But it didn't work.
The highcharts-more module is responsible for something else (adding more series), in your case you need to import and initialize the marker-clusters module as in the demo I sent you. Then you won't have the TypeScript problems you mentioned

You can read more about how to use Highcharts in React on the official wrapper repository on GitHub, link below.

Demo: https://codesandbox.io/s/highcharts-rea ... /index.tsx
Docs: https://github.com/highcharts/highcharts-react

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: Tie SVG points to the chart tooltip

Thank you! :D

It worked like a charm.

Honestly Michal, I can't thank you enough. Your demo helped me figure out my issue and made my day, heck, my whole week.

It was so kind of you to take the time to help me with this.

Have a great weekend,

Louis
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: Tie SVG points to the chart tooltip

There's one last thing I forgot to mention.

In the formatter function of the tooltip property, I can check if my point has multiples point on it.

The documentation in the highcharts.d.ts mentions 'isCluster' to check for a point that has a cluster of points.

But the property 'isCluster' is not in the highcharts.d.ts file.

When I debug my Typescript code, the right property name is clusteredData. In it, I can see my points and can generate the tooltip I want.

But I can't access it in Typescript because it's not defined in the highcharts.d.ts typed definition file. I'm using Highcharts version 9.3.2

I've looked at the latest version of highcharts.d.ts (https://raw.githubusercontent.com/highc ... harts.d.ts) on GitHub and even that version doesn't have the 'clusteredData' property.

Now I understand that if I was in Javascript, I wouldn't have this issue but since I'm using Typescript, could you advise Michal how what is missing in my Typescript application to have access to the 'clusteredData' property?
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: Tie SVG points to the chart tooltip

I also forgot to mention I did try what you wrote in your code sample with the 'isCluster' property. I took a screen shot to show it isn't seen in my Typescript application.
Error.png
Error.png (45.23 KiB) Viewed 817 times
Since my app relies on the highcharts.d.ts file, I can't do the same thing as in your code sample.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tie SVG points to the chart tooltip

Hi,

Unfortunately from what I can see this is missing in typing, you can extend the point interface and add the type manually.
Demo: https://codesandbox.io/s/highcharts-rea ... ked-gv33y6

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: Tie SVG points to the chart tooltip

Thank you Michal, this is actually was I did finally to avoid typing incidents.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tie SVG points to the chart tooltip

Welcome to our forum and thanks for contacting us with your question!

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”