ricardo.de.beijer
Posts: 3
Joined: Tue Sep 14, 2021 3:16 pm

Synchronized charts: only show tooltip when X value is the same

Hello,

I have a question regarding sychronized charts in combination with showing the crosshair/tooltip at specific moments.

I want to show the tooltips in both graphs if the X value at both points is the exact same, like below
intented.png
intented.png (22.92 KiB) Viewed 2348 times
I do NOT want to show the tooltip if one of the points is off, for example if I hover in the bottom graph, only that tooltip should be shown and not the one at the top graph. Because of the `searchPoint` function I get the closest one, but that does not always means I need to show the tooltip.
temponly.png
temponly.png (25.13 KiB) Viewed 2348 times
Same the other way around, when I hover over one of the points in the top graph, and there are no data points directly below, but the tooltip in the bottom graph is still shown for an earlier reading, which is not what I want, it should not show the bottom tooltip.
stoponly.png
stoponly.png (23.26 KiB) Viewed 2348 times
How could I fix this?
I understand it has something to do with the event listener on the parent element and a highlight method like the one from https://www.highcharts.com/demo/synchronized-charts but I have trouble comparing points between different charts.
I think most of the problem lies in the top graph having way less data points then the bottom graph, if they had an equal amount this would be easier/the searchPoint function would sort of worked already.

Thanks in advance
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronized charts: only show tooltip when X value is the same

Hi,
Thanks for your questions and welcome at the forum.

To sum up your requirements, you want to have a synchronized chart, but the tooltip you want to have when you hover over a given chart separately for each chart?

Such editing is not available directly from the API options, it should be possible to write functionality by editing code lines 13 to 53.
https://jsfiddle.net/BlackLabel/2h5b9yd8/

Have you tried solutions from this topic?
viewtopic.php?t=41114

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
ricardo.de.beijer
Posts: 3
Joined: Tue Sep 14, 2021 3:16 pm

Re: Synchronized charts: only show tooltip when X value is the same

Hello Sebastian,

Thanks for your reply.

To recap/explain the requirements I have:
- I have two charts, which are synchronized with each other.
- Each chart has its own tooltip. This is also fine. But if changing this to one tooltip would solve it, that could also be a solution.

Currently both tooltips are always shown in both charts.
The change I want is that only both tooltips should be shown if both of the charts have a data point on the X axis for the specific (epoch) time.
- If the bottom chart has no data for that specific time, but the top chart does, only show the tooltip for the top one.
- If the top chart has no data for that specific time, but the bottom chart does, only show the tooltip for the bottom one.
- If neither chart has data for that specific time, no tooltips
- And if both charts have data for that specific time, both shown a tooltip.

I have made sure that there is data with the exact same epoch time in both the top and bottom graph where I want it to be.

So in short: I want to determine when a tooltip should be shown, based on two points, one from each chart, and shown both tooltips when the X value matches.

In the jsfiddle you attached you mentioned "code lines 13 to 53.", there is a 'searchPoint' function in there which returns the closest point if I understand correctly. I think I need that one, but only call the 'highlight' method when the point.x matches another point?
The better question maybe is: how can I compare points between charts and only shown the tooltip if it matches some condition?

Hopefully you understand what I try to reach, thanks in advance.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronized charts: only show tooltip when X value is the same

Hi,
Thanks for the explantation.

I recommend try solution from this topic:
viewtopic.php?t=41114

In this way, you will add your statement inside tooltip.formatter() function.

Code: Select all

    tooltip: {
      shared: false,
      useHTML: true,
      formatter() {
        const x = this.x;
        const chart = this.series.chart;
        const secondSeries = chart.series[0];
        const secondPoint = secondSeries.points.filter(point => point.name === 'Retail')[0];
        if (secondPoint) {
          return `Series1: ${this.point.name}`
        }

      }
    },

Live demo:
https://jsfiddle.net/BlackLabel/bd1y05qm/


If you have questions about this implementation show me your code and I will try to answer.
Best regards.
Sebastian Hajdus
Highcharts Developer
ricardo.de.beijer
Posts: 3
Joined: Tue Sep 14, 2021 3:16 pm

Re: Synchronized charts: only show tooltip when X value is the same

Hello,

Thanks for your reply, with the help of your jsfiddle I was able to figure it out!
I changed L11 from

Code: Select all

if (p.index === point.index && ..
to

Code: Select all

if (p.x=== point.x && ....
And that was enough to get it working for me!
I also added the following on L15, to also have a crosshair shown

Code: Select all

chart.xAxis[0].drawCrosshair(normalizedEvent, point);
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronized charts: only show tooltip when X value is the same

Hi ricardo.de.beijer,

That's great to hear :) and thanks for share your solution.

Best regards!
Sebastian Hajdus
Highcharts Developer
reimen
Posts: 36
Joined: Sat Sep 12, 2020 3:41 pm

Re: Synchronized charts

Hello,

changing the demo "synchronized charts" to my data i got two issues:
1. in my demo https://jsfiddle.net/5ukrn806/3/ I don't know how to get the data in jsfiddle called "wd.csv" into the demo. In my setting there is a local file wd.csv that is callede by

Code: Select all

$.get('wd.csv', function(csv1) {
.
2. Most is working fine, but the synchronization is not: moving over for example chart 3 shows the crosshair in chart3 and chart 1, not in the other charts. What's wrong?

Best Regards
Reiner
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronized charts: only show tooltip when X value is the same

Hi reimen,

1. Try downloading according to this example, if you are trying to access the file on the local environment, data.csv should work here.

Code: Select all

$.get('Rate.csv', function(data) {
  Highcharts.chart('container', {
          data: {
            csv: data,
        },
  }
}

API References:
https://api.highcharts.com/highcharts/data.csv

When you using $.get need to import jQuery.

2. I don't see a working version here, simplify and submit to check.

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
reimen
Posts: 36
Joined: Sat Sep 12, 2020 3:41 pm

Re: Synchronized charts

Hi Sebastian,
many thanks for your answer,
may be I didn't tell precisly enough what I ment.
1. On my PC I load the data with the line

Code: Select all

$.get('wd.csv', function(csv1) {
.. And the data wd.csv are stored on a local server. But in order to demonstrate my second issue I put the code from my PC into the file https://jsfiddle.net/5ukrn806/3/ . Here we can not load the data from my local server, of corse. So I put some similar data at the beginning of the demo in jsfiddle. Even though I also called here the data "wd.csv" , I can not load them with the line

Code: Select all

$.get('wd.csv', function(csv1) {
My 1. question: how to change the line in order to load the data wthin the demo ?

Best Regards

Reiner
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronized charts: only show tooltip when X value is the same

Hi,

Your data loads here, I would start with this simple demo and expand it as needed.
To check how the data was loaded at the demo, data.complete is useful.

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

API References:
https://api.highcharts.com/highcharts/data.complete

Best regards.
Sebastian Hajdus
Highcharts Developer
reimen
Posts: 36
Joined: Sat Sep 12, 2020 3:41 pm

Re: Synchronized charts: only show tooltip when X value is the same

Hi Sebastian,
thanks, now I can load my data in the demo:https://jsfiddle.net/zpoq48f3/.
And now I can tell you the second issue: The synchronisation between the charts is not correct.
When I move the cursor over the first chart, then the tooltip and the crosshair are correct, but only on the first chart, the others do not react.
When I move the cursor for example over the third chart, then the tooltips and the crosshair are shown in the third chart and in the first one.
In both cases the tooltips and the crosshair should be shown in all charts as demonstrated in the official demo "synchronized charts".
What is wrong?

Best Regards

Reiner
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronized charts: only show tooltip when X value is the same

Hi,
You did a nice job customizing this, something else needs to be worked out in data.complete, after commenting there is a sync.

I would simplify our example as much as possible and try another rewrite for your case.
https://jsfiddle.net/BlackLabel/s7gvyt14/

Your code, line 130 something inside data.complete don't work.
https://jsfiddle.net/BlackLabel/ohavrqp0/

Best regards.
Sebastian Hajdus
Highcharts Developer
reimen
Posts: 36
Joined: Sat Sep 12, 2020 3:41 pm

Re: Synchronized charts: only show tooltip when X value is the same

Hi Sebastian,
many thanks for Your answer and your compliment.
Your simplified demo https://jsfiddle.net/BlackLabel/s7gvyt14/ is not very helpfull for me, because of my datastructure.
I don't know how to put my data in the structure:
[url] series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
}] [/url]

And, line 130 in my code that is very astonishing:
With these lines I get an error: options.series[j] is undefined , but it works fine.
Without these lines my code don't work anyway.

Best regards
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronized charts: only show tooltip when X value is the same

Hi,
I know another way to adjust data from csv, mapping, have a look at this example.

Demo:
https://jsfiddle.net/gh/get/library/pur ... ing-label/

API References:
https://api.highcharts.com/highcharts/d ... iesMapping

Best regards!
Sebastian Hajdus
Highcharts Developer
reimen
Posts: 36
Joined: Sat Sep 12, 2020 3:41 pm

Re: Synchronized charts: only show tooltip when X value is the same

Hi Sebastian,

many thanks for your patience.I still don't understand what's wrong with my lines 134 .. 138:

Code: Select all

      complete: function(options) {
				for ( j = 0; j < i2; j++){
      		options.series[j].data = null;
      		}
      }, 
There are 2 things i don't understand:
1. in my enviroment (firefox and a local server on R Pi) these lines i get an error: series[j] is undefined. But In https://jsfiddle.net/xshf4jwg/ there is no error. In both cases it works fine, but the synchronisation of the crosshair don't work correctly.
2. When i delete those lines the synchronisation of the crosshair works correctly, but there are more than one curves in the charts:
https://jsfiddle.net/xshf4jwg/1/

Can you help?

Regards Reiner

Return to “Highcharts Usage”