Show Marker symbol on the newest data in HightChart

Viewed 192

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.

1 Answers
Related