[Vuejs]-Datalabels only showing the latest value plotted on the max value

0👍

It is a bad idea to update points inside dataLabels.formatter callback. Instead, update points in the chart.load event callback and save real value as an eg. point.realValue. Then inside dataLabels.formatter use it to show max values:

chart: {
  renderTo: 'container',
  type: 'line',
  events: {
    load: function() {
      var chart = this;

      chart.series.forEach(function(series) {
        series.points.forEach(function(point) {
          if (point.y > 100) {
            point.realValue = point.y;

            point.update({
              y: 100
            }, false, false);
          }
        });
      });

      chart.redraw(false);
    }
  }
}

...

plotOptions: {
  line: {
    dataLabels: {
      enabled: true,
      formatter: function() {
        if (this.point.realValue > 100) {
          console.log(this);

          return this.point.realValue;
        }
      }
    }
  }
}

Demo:

API reference:

Leave a comment