Selecting a point by ID using Highcharts

highcharts, javascript

Solution

You can set an `id` for each point you want to get.

series: [{
    name: 'Jane',
    data: [{
        'name': 'Point1',
        'id': 'point1',
        'x': 1,
        'y': 2
    }, {
        'name': 'Point2',
        'id': 'point2',
        'x': 2,
        'y': 5
    }]
}, {
    name: 'John',
    data: [5, 7, 3]
}]

Then you can get the point by the following code.

// assuming that chart is your chart var
chart.get('point1');

demo

Or if you don't want to set an `id` you can simple loop thrue `points` to compare the `name` you want to find with the `point name`.

Reference:

- http://api.highcharts.com/highstock#object-Chart

Problem

Using Highcharts, how can I select a point using it's id? For example, if I create a chart using the following code: ``` chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'scatter' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [{ name: 'Point1', x: 1, y: 2 }, { name: 'Point2', x: 2, y: 5 }] }, { name: 'John', data: [5, 7, 3] }] }); }); ``` The tooltip tells me that when I hover over a point, what the id is. However, I can't figure out the syntax to identify that point. I know that `chart1.series[0].name` returns `Jane. Also,` chart1.series[0].data[0].name`returns`point1` Is there an easy way that I can just select the point and change the color knowing only 'point1'? I'm wondering if there is a more efficient way other than looping through all of the points each time.

Original source