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/