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

How to show two points at the same x,y coordinates

Hi,

I'm running into a situation where I have a scatter plot chart with some data points at the exact same place (Ex: I have two points at location (3,4)).

Are they any guidelines with Highcharts on how to indicate to the user that there are 2 points (or more than 2) at this location on the chart? Should we display a number on the dot? Or do I make the dot bigger to indicate to the user there's more than 1 point at that location?

I'm already working on formatting the tooltip to handle this special case.

I guess the best way would be to add a number of the dot. How can I add a number on top of a dot on a scatter plot chart?
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to show two points at the same x,y coordinates

Hi,

Thanks for contacting us with your question!

The best option would be using a split or shared tooltip. They are unfortunately not available for scatter charts, but there is a workaround for it.
Use line chart and disable lines. Here is a demo showing how to implement it:

Demo:
https://jsfiddle.net/BlackLabel/azx9gh5j/

If you decide to display the number on top of the dot, you can use Highcharts. SVGRenderer for that:

API Reference:
https://api.highcharts.com/class-refere ... derer#text

Let me know if that was what you were looking for!
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: How to show two points at the same x,y coordinates

Thank you so much for the fast response and the solutions to my problem Magdalena.

I like both solutions. I'll try them out and see how fit in my application.

Louis-Philippe
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to show two points at the same x,y coordinates

I'm glad I could help. Feel free to ask any further questions!
Magdalena Gut
Developer and Highcharts Support Engineer
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: How to show two points at the same x,y coordinates

I'm digging up a little bit more in the SVG renderer to print text on top of a dot.

Based on the documentation of the SVG renderer for text, I need the X,Y coordinates of the point where I want to print a number on top of the dot.

While I know which points would have more than one data point on it, how could I bind them to the SVG renderer text function?

When I assign my data to my chart, I know which data points will need to have a '2' to be printed on. I just don't know their x,y coordinates in the chart.

Would someone have an idea how I can find the x,y, coordinates of the points that needs to have a number '2' printed on top of them?
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to show two points at the same x,y coordinates

Hi,

I'm not sure if I understand correctly, but if you know which points will be double, you can easily find them on the chart based on their position on the series.

Code: Select all

chart.series[0].points[i].plotX
chart.series[0].points[i].plotY

Demo
https://jsfiddle.net/BlackLabel/g1hk04t8/

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: How to show two points at the same x,y coordinates

Thank you so much for your example. It helped me figure out where to do the rendering.

As my project is in Typescript with React, I do not have the properties plotX and plotY on the Point type.

From what I understand, these values are the offset (in pixels) from the top corner of the chart. While I do have access to chart.plotLeft and chart.plotTop as my place of departure on where to draw my text, I can't see to figure out how to find the x,y coordinates of the point in pixels.

Am I more clear with my question?
rappia
Posts: 6
Joined: Mon Sep 13, 2021 7:15 pm

Re: How to show two points at the same x,y coordinates

lpcarignan wrote: Mon Oct 04, 2021 7:41 pm Thank you so much for your example. It helped me figure out where to do the rendering.

As my project is in Typescript with React, I do not have the properties plotX and plotY on the Point type.

From what I understand, these values are the offset (in pixels) from the top corner of the chart. While I do have access to chart.plotLeft and chart.plotTop as my place of departure on where to draw my text, I can't see to figure out how to find the x,y coordinates of the point in pixels.

Am I more clear with my question?
Not sure if this will work for you, but it did for me in a different scenario using angular. If you log the Point object, you can see that you actually might have those properties, but not the types, so you can create a custom model within your app that will extend the Point model. Lets call it "PointExtended" and you can add those properties so you will have access to them from your typescript files, not sure if this covers what you want to do.
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: How to show two points at the same x,y coordinates

Thank you so much for the idea.

While I'm in Typescript, I did something similar that I should have thought before posting my previous message.

Even though the Type definition file in Highcharts doesn't reveal a pointX property, it's actually in the object when I debug it. So I just cast the object to a 'any' type. In Typescript, you can then call any property on this type of object.

Code: Select all

                        
var point = chart.series[0].points[0] as any;
let plotX1 = point["plotX"];
let plotX2 = point.plotX;
And that worked. I was able to have the pixel value of my dots.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to show two points at the same x,y coordinates

Hi,

Thank you so much rappia for finding the solution and sharing it with us!

In case of any further questions, feel free to contact us again.
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
rappia
Posts: 6
Joined: Mon Sep 13, 2021 7:15 pm

Re: How to show two points at the same x,y coordinates

lpcarignan wrote: Tue Oct 05, 2021 6:07 pm Thank you so much for the idea.

While I'm in Typescript, I did something similar that I should have thought before posting my previous message.

Even though the Type definition file in Highcharts doesn't reveal a pointX property, it's actually in the object when I debug it. So I just cast the object to a 'any' type. In Typescript, you can then call any property on this type of object.

Code: Select all

                        
var point = chart.series[0].points[0] as any;
let plotX1 = point["plotX"];
let plotX2 = point.plotX;
And that worked. I was able to have the pixel value of my dots.
I'm glad you figured how to make it work. Even tho, I strongly recommend you to create the custom type, as using any is considered a "bad practice" in TypeScript, you should use any only if there is no other way to not use it.

Once again, I'm glad you made it work.

Cheers my friend!

Return to “Highcharts Usage”