dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

CSV-Element in tooltip

Hi, we have a chart where we implement data from a csv-file within the html-part und plot the data as line and as area range. I tried to change the default of the tooltip to a costum one with a formatter, however wasn't able to get the correct JS-code to include some of the data items from the csv (year (column 1 in csv) and range (columns that bild the variable range). Could you directly help me with this issue?
Here you find the example: https://jsfiddle.net/statistik_tg/3g567v1x/21/
Many thanks and kind regards,
Daniela
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: CSV-Element in tooltip

Hi dktg,

Thanks for contacting us with your question.

Here you can find demo with year shown in the tooltip:
https://jsfiddle.net/BlackLabel/x1n9uh32/

When it comes to range data that you want to show in tooltip, I don't know exactly what do you mean. Please provide me with more details and tell exactly which values should be shown.

Best regards!
Mateusz Bernacik
Highcharts Developer
dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

Re: CSV-Element in tooltip

Hi, thank you for your reply and your example and sorry for not being so clear about my question. What I wanted was to create a costumized tooltip for the area range (in the data the variable that start with ranges), where in the header the year is displayed (that part I managed to to thanks to your example code) and in the main line of the tooltip the range, but instead of having both numbers following each other, I would like to show some text between the numbers that account for the high and the low part of the area range (i. e. for the area range around the green dashed line for 2021: Kanton: 284'776 Personen (Szenario 1) - 285'621 Personen (Szenario 3)). Do you understand more or less what I mean? For all the other lines in the chart, the tooltip defined in the last part of the formatter should apply.

See adapted example: https://jsfiddle.net/statistik_tg/3g567v1x/31/

Thank you and kind regards,
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: CSV-Element in tooltip

Hi dktg,

Please check the demo I have prepared:
https://jsfiddle.net/statistik_tg/3g567v1x/31/
In the tooltip formatter I conditionally check if the hovered series is arearange, and if so I show in the tooltip arearange high and low value, along with some custom text.

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

Re: CSV-Element in tooltip

Hi, thank you for the adapted example. When we use the default tooltip for area range, both values (the high and the low) are displayed in the tooltip quite nicely. The only disadvantage there is that the order of the text by default is: series.name and then the values. In order to change this slightly, I introduced a formatter. In your example, the low value is now displayed perfectly well. But would it be possible to include the high value as well which is the value in the 4th column of the csv? I tried something like this.y[3], but this didn't work.

Thanks for any further support and kind regards,
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: CSV-Element in tooltip

Hi dktg,

I think I have forgotten to fork my example based on your demo before and accidentally shared exactly the same demo that you provided me with.
Please check this demo: https://jsfiddle.net/BlackLabel/o98hfy16/
It should show correctly low and high arearange values. It works exactly as I described in my previous post.

Let me know what do you think about this approach.
Best regards!
Mateusz Bernacik
Highcharts Developer
dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

Re: CSV-Element in tooltip

Hi, perfect, thank you. It's exactly what I was looking for.

Kind regards,
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: CSV-Element in tooltip

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”