Format highcharts tooltip

Question

My values are:

series: [{
        name: 'name1',
        data: data1,
        data2: data2,
        stack: 'normal'
    }, {
        name: 'name2',
        data: data3,
        data2: data4,
        stack: 'normal'
    }]

And now I need do the tooltip, but I don´t know how to change the value here:

      headerFormat: '<table id="tablaTooltip"><tr>{point.x}</tr>',
      pointFormat: '<tr><td><span style="color: {series.color}"><i class="fa fa-square"></i></span>{series.name}:</td><td style="text-align: right">{point.y}</td></tr>',
      footerFormat: '</table>',

Point.y is the same as data, but I need show data2.

Thank you!

You should pass the function to the formatter method, as described [here](http://stackoverflow.com/questions/8514457/set-additional-data-to-highcharts-series) — mephisto4, Aug 11 '16 at 09:24

score 3 · Accepted Answer · answered Aug 11 '16 at 09:41

Since data2 is your custom data and not an highcarts default, you have to retrieve it manually. I assume that data1 and data2 have the same size, anw now you know where data2 is located

tooltip: {    
    formatter: function() {
       var point = this.point;
       point.y2 = this.series.options.data2[point.index];
       return '<b>my data1 point: ' + point.y + '<br/> my data2 point: ' + point.y2;
    }    
}

score 0 · Answer 2 · answered Aug 11 '16 at 09:41

I am not sure if you can use data2 property, as it is not built into`Highcharts. If you want to use custom data into your chart you can do it this way.

series: [{
    name: 'Foo',
    data: [{
        y: 3,
        myData: 'firstPoint'
    }, {
        y: 7,
        myData: 'secondPoint'
    }, {
        y: 1,
        myData: 'thirdPoint'
    }]
}]

and then format it as

formatter: function () {
    return 'Extra data: <b>' + this.point.myData + '</b>';
}

If you want to check, something similar on Highcharts Custom data loading, you can check out this weather website Weatherion

Format highcharts tooltip

2 Answers2