Set Additional Data to highcharts series

Sam picture Sam · Dec 15, 2011 · Viewed 94.2k times · Source

is there any way to pass some additional data to the series object that will use to show in the chart 'tooltip'?

for example

 tooltip: {
     formatter: function() {
               return '<b>'+ this.series.name +'</b><br/>'+
           Highcharts.dateFormat('%b %e', this.x) +': '+ this.y;
     }

here we can only use series.name , this.x & this.y to the series. lets say i need to pass another dynamic value alone with the data set and can access via series object. is this possible?

Thank you all in advance.

Answer

Nick picture Nick · Dec 15, 2011

Yes, if you set up the series object like the following, where each data point is a hash, then you can pass extra values:

new Highcharts.Chart( {
    ...,
    series: [ {
        name: 'Foo',
        data: [
            {
                y : 3,
                myData : 'firstPoint'
            },
            {
                y : 7,
                myData : 'secondPoint'
            },
            {
                y : 1,
                myData : 'thirdPoint'
            }
        ]
    } ]
} );

In your tooltip you can access it via the "point" attribute of the object passed in:

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

Full example here: https://jsfiddle.net/burwelldesigns/jeoL5y7s/