ambaetzgi
Posts: 19
Joined: Tue Feb 22, 2022 7:52 am

Tooltip with array

hello
i have a graph with 2 lines.
const Data1_1 = [["2022-05-10 00:00:01",17],["2022-05-10 00:04:58",17],["2022-05-10 00:09:57",17],["2022-05-10 00:14:57",17],["2022-05-10 00:19:58",17]];
const Data1_2 = [["2022-05-10 00:00:01",0],["2022-05-10 00:04:58",0],["2022-05-10 00:09:57",0],["2022-05-10 00:14:57",0],["2022-05-10 00:19:58",0]];

the numbers are synonyms for texts.
e.g. 1st line
0 = waiting
1 = loading
2 = works
17 = sleep
etc.
2. line_
0 = -
1 = cold
2 = warm
3 = wet
how can i display the values in toooltip as texts. so instead of
scode: 0
sscode = 2
i want
scode: waiting
sscode: warm

Thanks for help
ambaetzgi
Posts: 19
Joined: Tue Feb 22, 2022 7:52 am

Re: Tooltip with array

with this code in tooltip, I have only one translation

var scode1 = ['waiting', 'loading', 'works', '', '', '', '', '', '', '', '', '', '', '', '', '', 'sleep'];
var scode2 = ['-', 'cold', 'warm', 'wet', '', '', '', '', '', '', '', '', '', '', '', '', 'old'];
formatter: function () {
//var serieI = this.series.index;
var index1 = this.y;
var comment1 = scode1[index1];
return comment1;
}
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tooltip with array

Hello,

Do you want to achieve something like this?
Demo: https://jsfiddle.net/BlackLabel/5mshf1a0/

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
ambaetzgi
Posts: 19
Joined: Tue Feb 22, 2022 7:52 am

Re: Tooltip with array

thank you.

this is a first step to my perfect solution. because i want to represent the two values with each other, i added shared: true. Now there is no tooltip anymore.
how do i get both in one box?

thanks
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tooltip with array

Hi,

If you set tooltip.shared on true you must modify tooltip.formatter() callback function to return the data the right way.

Demo: https://jsfiddle.net/BlackLabel/aoc94md5/
API: https://api.highcharts.com/highcharts/tooltip.formatter

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
ambaetzgi
Posts: 19
Joined: Tue Feb 22, 2022 7:52 am

Re: Tooltip with array

Hello
thank you for this solution. i still have one wish. i have tried some things, but i can't get the whole thing as a table with date. furthermore, the 3rd series (timer) must not be displayed:

2022-05-10
-----------------------------------------------
status code: sleep
Stopcode: warm

something like this but with the text?
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + '<td style="text-align: right"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tooltip with array

You're welcome!

Instead of tooltip.pointFormat you should use tooltop.pointFormatter() callback function with its own custom logic to ignore 3rd series.

Demo: https://jsfiddle.net/BlackLabel/ejgL2xsu/
API: https://api.highcharts.com/highcharts/t ... tFormatter

Feel free to contact us again.
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
ambaetzgi
Posts: 19
Joined: Tue Feb 22, 2022 7:52 am

Re: Tooltip with array

ok. thank you
i think there is a misunderstanding now.

the display layout is great. but the content is now again the number and not the text.
i want this layout with the conversion of the number to text with the variables scode1 and scode2. is this possible?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tooltip with array

Hello,

Yes, you can do it this way: https://jsfiddle.net/BlackLabel/ey7vtxs3/

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
ambaetzgi
Posts: 19
Joined: Tue Feb 22, 2022 7:52 am

Re: Tooltip with array

thats great. thanks
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tooltip with array

That's great to hear! In case of any further questions, feel free to contact us again.

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

Return to “Highcharts Usage”