How to highlight specific Point with Highcharts Js

user_14585669 0
Viewed 21

I have a simple Highchart with a dataset of up to 1000 datas. There are only y values the x values are generated automatically. Also, the values come from my nodejs server so please don't be surprised about the notation. Now I want 3 special values whose x and y values are known to be highlighted. In which way doesn't matter for now. One possibility would be to show the point at the location, otherwise they are not displayed. The problem I have is that I don't know how to control a specific point.

 var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart-emg1',
            type: 'line'
        },
        title: {
            text: 'EMG 1'
        },
        xAxis: {
            tickInterval: 1

        },
        yAxis: {
            title: { text: 'Voltage'}
        },
        series: [{
            data: [<%-data1 %>]
        }]
    });
highcharts javascript
1 Answers

You can use the load event and update specific points. For example:

events: {
  load: function() {
    this.series[0].points.forEach(point => {
      const isPointToHighlight = pointsToHighlight.some(
        p => p.x === point.x && p.y === point.y
      );
      if (isPointToHighlight) {
        point.update({
          color: 'red',
          marker: {
            enabled: true
          }
        }, false);
      }
    });

    this.redraw();
  }
}

Live demo: http://jsfiddle.net/BlackLabel/tLd3j78f/

API Reference:

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Point#update

user_89513770
Related