remove previous markers and retain only single marker highchart

Question

Hi I am trying to learn highchart, and while reading the documentations of it, I am having a hard time exploring how to solve my problem. Can you help me remove the markers of previous points and retain only the current marker of the line chart?

$(document).ready(function () {
Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        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();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                Highcharts.numberFormat(this.y, 2);
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

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

Here is the image I am trying to do one marker is being displayed.

I am using the jsfiddle demo of highchart, here is the link

Answer 1

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:

series.addPoint({
  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: http://jsfiddle.net/10yfarod/

Edit

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: http://jsfiddle.net/10yfarod/1/

Answer 2

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(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    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();
                    series.data[series.data.length - 1].update({
                      marker: { enabled: false }
                    }, false)
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }

example: http://jsfiddle.net/m9ykaaa7/