Show Marker symbol on the newest data in HightChart

Question

I am trying to create a plugin for our chart that shows a marker on the last data in the series of a data streams. The symbol should show on the newest data only. I learnt here that i can extend the prototypes and create my chart Here like

(function (H) {
    H.wrap(H.Chart.prototype, 'init', function(proceed) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
   };
   H.wrap(H.Chart.prototype, 'redraw', function(proceed, points) {
     proceed.apply(this, Array.prototype.slice.call(arguments, 1));
     //Add my marker symbol here
  });
}(Highcharts));

I tested the two events above, they start add the right time. However, my points is a boolean value which is not what i was expecting. I read the api docs Here yet couldn't understand how to proceed. Please if some has a better example or guidance on how to use the extension and achieve this would highly be appreciated. My data is a stream and continuos data and need to show the the marker symbol on top of the newest data only.

Update

Thanks for the response sir. We are using react-highcharts and i noticed i don't have access to the chart load event. Nonetheless, i noticed i can extend my H.Series prototype as explained Here and my event is fired on every new tick paint. I now update my code to

  H.wrap(H.Series.prototype, 'drawGraph', function (proceed) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        const { chart } = this;
        renderSpotIndicator(chart);
    });  
   function renderSpotIndicator(chart){
        const series = chart.series[0],
              len = series.data.length - 1,
              lastPoint = series.data[len];    
        if(lastPoint){
            lastPoint.update({
               marker: {
                enabled: true
               }
          });
        }

    }

When i run , then i noticed my marker property does not exist in my lastPoint as hence its throwing errors. I was not able to use that. I was advised to paint the marker instead. following the example Here . I changed my code to

function renderSpotIndicator(chart){
        const series = chart.series[0],
              len = series.data.length - 1,
              lastPoint = series.data[len];    
        if(lastPoint){
            chart.renderer.circle(lastPoint.pointX, lastPoint.pointY, 5).attr({
                            fill: lastPoint.color,
                            padding: 10,
                            r: 5,
                            stroke: 'white',
                            'stroke-width': 1,
                            zIndex: 5
                        }).add();
        }

    } 

The above is throwing errors as well. When i checked, i noticed the property circled it self is not available on my lastPoint. My lastPoint is returning correct but i am not able to set the marker on the specific point for the property was not available on the lastPoint. Please any help would be appreciated sir.

Answer 1

You can edit the load event and extract last point of series. Then call update to show the marker. Each time when your chart is refreshed (by add point) you need to do the same steps. Extract last point, update marker (hide), add point and show last marker.

var series = this.series[0],
          len = series.data.length - 1,
          lastPoint = series.data[len];

        lastPoint.update({
          marker: {
            enabled: true
          }
        });
        setInterval(function() {
          var x = (new Date()).getTime(), // current time
            y = Math.random();

          len = series.data.length - 1;

          series.data[len].update({
            marker: {
              enabled: false
            }
          }, false);

          series.addPoint([x, y], true, true);

          len = series.data.length - 1;

          series.data[len].update({
            marker: {
              enabled: true
            }
          }, true);

        }, 1000);

Example: - http://jsfiddle.net/ga2sym0v/