append point in the middle of graph

Question

Hey I am using highcharts as my basic graph library. I would like to add points dynamically to a graph,according to highcharts API documentation, I should use the addPoint method. I have tried to use this method, but in every try, the graph always added the point to the end of the series and not to the middle of the series.

According to their API documentation:

Add a point to the series after render time. The point can be added at the end, or by giving it an X value, to the start or in the middle of the series.

so my questions are:

1. How to added a point to a random location?

2. How do I remove the point which has been added?

I am attaching the following demo to demonstrate the problem.

$(function () {
    $('#container').highcharts({

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]

    });


    // the button action
    var i = 0;
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        chart.series[0].addPoint(50 * (i % 3));
        i += 1;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Add point</button>

Answer 1

As the doc of Highcharts says, "The point options. If options is a single number, a point with that y value is appended to the series.If it is an array, it will be interpreted as x and y values respectively." So just give an array as the parameter of addPoint().

To remove a point, use removePoint.

Here is the example which add the point in the position "i", and remove the point in the position "i":

$(function () {
    $('#container').highcharts({

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]

    });


    // the button action
    var i = 0;
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        chart.series[0].addPoint([i, 50 * (i % 3)]);
        i += 1;
    });

    $('#removebutton').click(function () {
        var chart = $('#container').highcharts();
        chart.series[0].removePoint(i);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Add point</button>
<button id="removebutton" class="autocompare">remove point</button>

Answer 2

You need to specify both the x and y coordinates, otherwise it is going to assume that the x coordinate is the next data point on the x axis. Try this:

$(function () {
$('#container').highcharts({

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

});


// the button action
var i = 0;
$('#button').click(function () {
    var chart = $('#container').highcharts();
    chart.series[0].addPoint({
    x: 2*i, // or some other value
    y: 50 * (i % 3)
});
    i += 1;
});

});