(jQuery Highchart) Is there any way to put extra custom data inside Tooltip Box?

Question

I want to add extra custom statistic data lines inside Tooltip Box, which appears over mouse hover. As far as i've learned, it shows only the data inside the object arrays called series: and tooltip:.

I just wanna put more custom data (into Tooltip Box) with seperated values for each of Tooltip (NOT COMMON ONE).

For example:
Bar 1 =========================== 41% Tooltip: Water: 7.86%
Bar 2 ================= 33% Tooltip: Salt: 5.2%, Water: 80%
Bar 3 ====================== 35% Tooltip: Caffeine: 51%, Alcohol: 31%, Water: 4%

Tooltip items & values for each bar are different. How can i?

Answer 1

You can store this information with the series, like the following.

{
    type: 'bar',
    name: 'Bar3',
    composition: {
        'Caffeine': '51%',
        'Alcohol': '31%',
        'Water': '4%'
    },
    data: [35]
}

Then you can get it through the tooltip formatter. Use this to reference the series.

tooltip: {
    formatter: function() {
        console.log(this.series.options.composition);
    }
}

Then you only have to format the text according to what you want.

Demo

Reference:

• Tooltip formatter