<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
// CREATE RANDOM DATA
function random() {
  let data = [];
  for (let i = 0; i < 110; i++) {
    data.push(Math.round(Math.random() * 41));
  }
  return data;
}


// CHART OBJECT
Highcharts.chart('container', {
  chart: {
    zoomType: 'xy',
    events: {
      render: function() {
        const chart = this,
          data = chart.series[0].data;

        let pointsToProject = [];

        (chart.myCustomCircles || []).forEach(function(circle) {
          circle.destroy();
        });

        chart.myCustomCircles = [];

        pointsToProject = chart.series[0].points.filter(function(point) {
          return point.flag && point.isInside;
        });

        // Where to draw a circle
        pointsToProject.forEach(function(point) {
          const customCircle = chart.renderer.circle(
              chart.plotLeft + point.plotX,
              chart.plotSizeY + chart.plotTop,
              4
            )
            .attr({
              fill: 'red',
              zIndex: 2
            })
            .add();

          chart.myCustomCircles.push(customCircle);
        });

        // Where to render the text
        if (!chart.myCustomText) {
          chart.myCustomText = chart.renderer.text(
              '',
              chart.plotLeft,
              35
            )
            .add();
        }

        chart.myCustomText.attr({
          text: 'Number of points with max value: ' + pointsToProject.length,
        });
      }
    }
  },

  title: {
    align: 'right',
    text: 'Dynamic chart actions'
  },

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        formatter: function() {
          let visiblePoints = this.series.points.filter(function(point) {
              return point.isInside;
            }),
            max = visiblePoints.reduce(function(acc, cur) {
              return Math.max(cur.y, acc);
            }, 0);

          if (this.y === max) {
            this.point.flag = true;

            return this.y;
          } else {
            this.point.flag = false;
          }
        }
      }
    }
  },

  series: [{
    data: random()
  }]

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.