Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Custom tooltip - loop through array and display data in tabular format

I am expecting tooltip like below - which can be looped over to display all name and price in tabular format. But I am not sure how to get it to work in mine. Assume, I want this data to be displayed on my first plotline (x-axis tick label "1").

var toolTipName = ["item1", "item2", "item3", "item4"];
var toolTipPrice = [10, 20, 30, 40];

tooltip: {
shared: true,
useHTML: true,
headerFormat: '<table><tr><th colspan="2">Items</th></tr>',
pointFormat: '<tr><td style="margin-right: 80px;">ItemDetails </td>' +
'<td>Name</td>' +
'<td style="text-align: right"><b>${toolTipName[looping variable]}</b></td><td>Price </td>' +
'<td style="text-align: right"><b>${toolTipPrice[looping variable]}</b></td></tr>',
footerFormat: '</table>',
}

How can I loop over to display all name and price in my custom tooltip.
Fiddle - https://jsfiddle.net/jrqdfwsL/44/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Custom tooltip - loop through array and display data in tabular format

Hi there, thank you for contacting us!

I'm sorry, but I'm not entirely sure what you want to achieve. Do you need a custom tooltip for plotLines (which is already implemented in your code) or a custom tooltip for the point series?

Could you give me a visual example how your tooltip should be formatted?

As a side note, remember that there can be only one tooltip formatter, that's why there is an if statement in yours, which check whether a hovered point is a plotLine or not. Formatting for plotLine tooltip can be modified in lines 78-84, and a formatting for normal, series points can be specified in line 86.

Waiting for your reply,
Regards!
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip - loop through array and display data in tabular format

Hi,
Thank you for the reply.
I want custom tooltip for plotline (which is already implemented as mentioned, but need to be formatted in tabular format). Like Below:

Name Price
item1 10
item2 20
item3 30
item4 40

My question is:
1)How do I loop through array (toolTipName[loopingvariable]) inside custom tooltip to display as above.
2)How to display data in tabular format (I am finding it difficult to implement tabular format inside my custom tooltip).
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Custom tooltip - loop through array and display data in tabular format

Thank you for the explanation, now everything is clear for me.

1) You can loop through it just like you normally would in plain JS. Just choose the iterator for it.
2) Displaying the data in a tabular form is not hard, but needs a bit of tinkering with creating a HTML string.

Please, take a look at the demo link and tell me if that's what you wanted to achieve.
https://jsfiddle.net/BlackLabel/9f1rmonL/

Best regards!
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip - loop through array and display data in tabular format

Thanks a lot. But as I mentioned, I want it only on my first plotline. Second plotline has different tabular values.

This is how my data will look:
var toolTipNameForAll = [["item1", "item2", "item3", "item4"], ["item5", "item6", "item7", "item8"]];
var toolTipPriceForAll = [[10, 20, 30, 40],[50,60,70,80]];

second plotline should display:

name price
item5 50
item6 60
item7 70
item8 80

I generally use 'index' as below to differentiate between plotlines, but does not seem to work here (in tabular format).
var index = this.point.y; // to get index - to plot diff values for each tooltip

Please check my fiddle for the code I have tried. https://jsfiddle.net/repmyabd/
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip - loop through array and display data in tabular format

Please ignore the previous post. I got it resolved myself.
Using var index = this.point.y; // to show diff value for each plotline

https://jsfiddle.net/wo6793uv/136/

Thanks a lot :)
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Custom tooltip - loop through array and display data in tabular format

Oh, I'm sorry about the plotLines - I must have missed the info in the first post, where you said that you want to display it only on the first plotLine.

Your solution is really good! I'm glad that you have managed to solve it by yourself, but if you will need further assistance, please do not hesitate to contact us!

Best regards
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip - loop through array and display data in tabular format

Hi,

The solution provided was perfect. Instead of writing same code again for different types of plotline (green and red) - https://jsfiddle.net/bkzop4xc/2/

I am rewriting my code (to reduce the no of lines). So that performance is better. I am almost there but not sure why the lines are not plotted with my new code. I would really appreciate if you could give your input on this. I have commented out previous code in below fiddle for reference.
fiddle: https://jsfiddle.net/dsjLuwef/13/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Custom tooltip - loop through array and display data in tabular format

Hi there,

Thank you for reaching out!

It was just a small error in line 50. You were referencing the items, where you should be refering to item.values.
Take a look at the working demo: https://jsfiddle.net/BlackLabel/7h43jmec/

In case of any other questions, do not hesitate to ask,
Regards!
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip - loop through array and display data in tabular format

That was an amazing quick reply. Thanks a lot.
It's all working good. But I could not substitute 'customTooltip1: true,' as 'item.customTooltip: true'. Doing so shows error. I want to show different tooltips.
Rite now fiddle shows "Tootip for PlotA" for both green and red plotlines. https://jsfiddle.net/tvswz1hk/18/

- green line should show "Tootip for PlotA"
- red line should show "Tootip for PlotB"
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Custom tooltip - loop through array and display data in tabular format

I have refactored the if statements in tooltip formatter a bit. Now you can specify a tooltip message inside the plotOptions config object. Should be working fine now: https://jsfiddle.net/BlackLabel/npdwxtr3/

Regards!
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip - loop through array and display data in tabular format

That is a great answer but I might have to display complex tooltip for some plotlines. For eg, tabular format for plotA.
Will I be able to assign that in plot options config:

Updated fiddle with complex tooltip: https://jsfiddle.net/v79rhf3s/1/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Custom tooltip - loop through array and display data in tabular format

Of course, you can do that. For example define an HTML string in the options config for a specific plotLine, just like we do now with a simple text string.

Another approach would be to use the solution, that you have used previously. I would still suggest using some custom property on your config object, but instead of assigning a whole text string to in, maybe some boolean value, or one word like "standard", "tabular", etc.
Then, in your tooltip formatter define some if statements that will check for the custom property value, and then apply specific formatting for a specific tooltip.

Both of these solutions are correct so now it is up to you which one will be simpler, cleaner, more elegant, and more performant.

In case of any other questions, do not hesitate to ask,
Best regards!
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip - loop through array and display data in tabular format

I believe I am following what you have suggested. The second option.
But still red plotline tooltip does not show. Thanks again.

const item1 = {
name: 'PlotA',
customTooltip: 'GreenPlotLine' // for tabular
};
const item2 = {
name: 'PlotB',
customTooltip: 'RedPlotLine' // for standard
};

In the formatter:

if (this.point.customTooltip) {

// green tooltip works
if ('GreenPlotLine'){
..............
return html;
}
// red tooltip does not work
if ('RedPlotLine'){
return' Tooltip for Plot B'
}

}

Fiddle: https://jsfiddle.net/3hqkpjwo/8/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Custom tooltip - loop through array and display data in tabular format

That's because in the second if statement you are trying to just check if ('RedPlotLine') which does not make much sense if we think about it from the JS perspective, whereas in the first one, you are actually looking for a boolean value, and since it's true, because such property is present, you are displaying the first tooltip.

To make that work, I'd suggest rewriting the if statements to:

Code: Select all

if (this.point.customTooltip === 'Your custom string from the plot line options').
Take a look at the fixed demo: https://jsfiddle.net/BlackLabel/6d5w412q/

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”