How to pass custom data into Highcharts graph click event

Question

Is possible to pass custom data when rendering a Highcharts graph (funnel, in this case), so that when I bind a click event, I can use this custom data point?

Currently, all that I can get is the "name" event.point.name, which I provide for the Label, but I also want to pass a song_id too.

http://jsfiddle.net/y4a2end3/1/

Is there a place in the graph code that I can add another data point, like "song_id"?

    series: [{
        name: 'Song Plays',
        data: [
           ['song_name1',123, 'song_id_1'], /* song_id_1 would be the custom data */
           ['song_name2',234, 'song_id_2']
        ]
    }]

Answer 1

If you want to attach additional data to points in a series you can initialize the points that need additional data as objects instead of arrays/ints. For example, with your code you could do:

series: [{
    name: 'Song Plays',
    data: [
       {x:'song_name1', y:123, songid:'song_id_1'},
       {x:'song_name2', y:234, songid:'song_id_2'}
    ]
}]

You can then get it from the point on click as event.point.songid. See this JSFiddle demo using point click and tooltip.

Note that in many cases x in the object will not be required. It is often automatic and sequential.