Accepted answer

You can disable marker for each point except the last one.

On start:

      series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),

            for (i = -19; i <= 0; i += 1) {
                    x: time + i * 1000,
                    y: Math.random(),
                    marker: {
                      enabled: i === 0
            return data;

And disabling marker in the last point before the new point is added:

          events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
          [ - 1].update({
                      marker: { enabled: false }
                    }, false)
                    series.addPoint([x, y], true, true);
                }, 1000);



You have to hide the markers for data points by default. You have to update the highcharts object to contain the following options:

plotOptions: {
    series: {
        marker: {
            enabled: false

Now every time when you add a point, you have to add it like:

  x: x,
  y: y,
  marker: {enable: true}

And hide the marker for last point by updating the property:

last_point.update({ marker: { enabled: false } });

Here's a working example:


You can add the marker after adding the point to the series. But this messes up with that smooth line animation. To avoid that you can use the setTimeout to show the marker after 500ms when the animation finishes.

Here's a working example:

Related Query

More Query from same tag