pal3kuno
Posts: 27
Joined: Mon Apr 06, 2020 10:36 am

How to compare multiple charts data

Hello, Can anyone give me a sample how to make multiple chart comparison. Here is the reference I would like to implement. Thank you

https://www.cryptoground.com/ethereum-price-history

as shown in the link there are 4 graphs and when hovering a mouse to one of the graph, the data from the other graph showing as well. hope you guys get I meant. Thanks
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to compare multiple charts data

Hello pal3kuno,

Thanks for contacting us with your question.

Here you can find our official demo with synchronized charts: https://www.highcharts.com/demo/synchronized-charts
Check the available code for general idea how to achieve something like this and then let me know it it was what you were looking for and if you have any further questions.

Best regards!
Mateusz Bernacik
Highcharts Developer
pal3kuno
Posts: 27
Joined: Mon Apr 06, 2020 10:36 am

Re: How to compare multiple charts data

Hi mateusz.b,

Okay l will look into it and try it out. Thank you for your reply.
Last edited by pal3kuno on Mon Sep 27, 2021 6:54 am, edited 1 time in total.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to compare multiple charts data

You're welcome! I'm waiting for your feedback.
Mateusz Bernacik
Highcharts Developer
pal3kuno
Posts: 27
Joined: Mon Apr 06, 2020 10:36 am

Re: How to compare multiple charts data

Hi mateusz.b

I tried the sample link you provided but I'm quite lost on the xData json response, can you help me about this?thank you

https://cdn.jsdelivr.net/gh/highcharts/ ... ivity.json
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to compare multiple charts data

Hi pal3kuno,

xData in json response contain x values which are later combined with y values making series data for each chart. You've probably realized it already, but in synchronized charts it is very important to make sure that they have same x values.

Best regards!
Mateusz Bernacik
Highcharts Developer
pal3kuno
Posts: 27
Joined: Mon Apr 06, 2020 10:36 am

Re: How to compare multiple charts data

Hi mateusz.b,

Thank you for your reply. would it be possible as well to put date time in the chart?thanks
pal3kuno
Posts: 27
Joined: Mon Apr 06, 2020 10:36 am

Re: How to compare multiple charts data

and one more thing. rangeselector is not showing when I add here
https://jsfiddle.net/gh/get/library/pur ... multi-axes
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to compare multiple charts data

Hello pal3kuno,

Yes, it would be possible to use date time as x values. You just need to make sure that these values are the same for all synchronized charts.

When it comes to range selector, it is not showing because it is a part of Highcharts Stock ,not regular Highcharts. If the license allows you then feel free to import highstock and use stockChart constructor to get a chart with a range selector.
Demo: https://jsfiddle.net/BlackLabel/ydt3eqrw/

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
pal3kuno
Posts: 27
Joined: Mon Apr 06, 2020 10:36 am

Re: How to compare multiple charts data

Hi mateusz.b,

the range selector is working fine when I changed to stock chart. but the legend is gone. can you help?thanks
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to compare multiple charts data

pal3kuno,

In Highcharts Stock legend.enabled option defaults to undefined. Simply set its value to true to show the legend.
Demo:https://jsfiddle.net/BlackLabel/c3q9srag/
API reference: https://api.highcharts.com/highstock/legend.enabled

Best regards!
Mateusz Bernacik
Highcharts Developer
pal3kuno
Posts: 27
Joined: Mon Apr 06, 2020 10:36 am

Re: How to compare multiple charts data

Hi mateusz.b.

It worked! thank you so much for your time answering my question.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to compare multiple charts data

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer
pal3kuno
Posts: 27
Joined: Mon Apr 06, 2020 10:36 am

Re: How to compare multiple charts data

Hi mateusz.b,

regarding the chart xaxis datetime format it seems I'm getting a different one. kindly check the screenshot over https://imgur.com/a/XYQHjfo pls advise.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to compare multiple charts data

Hello pal3kuno,

The problem is that the first chart has one less xAxis tick? If so, then there are few options that could help. I would suggest trying tickInterval option. Use it along with xAxis.min, just make sure that values of these options are the same for each chart.
API reference: https://api.highcharts.com/highcharts/x ... ckInterval
https://api.highcharts.com/highcharts/xAxis.min

If you want to have ticks placed every single hour (like in the attached image) tickInterval value should be set to 3600000 (1 hour in miliseconds)

If that doesn't help please provide me with simplified working demo.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”