Geek Answers Handbook

Add a point in the middle of the chart

Hey, I use highcharts as my main graph library. I would like to dynamically add points to the graph, according to the documentation for the high-definition API, I have to use the addPoint method. I tried to use this method, but in each attempt, the graph always added a 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 the render time. A point can be added at the end or by specifying its X value at the beginning or in the middle of the series.

so my questions are:

  • How to add a point to a random location?

  • How to delete an added point?

To demonstrate the problem, enclose the following demonstration.

 $(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>
+5
source share
2 answers

As the doc in Highcharts shows: "Point parameters. If the parameters are one number, a point with this y value is added to series.If this is an array, it will be interpreted as x and y values, respectively." Therefore, simply specify the array as the addPoint() parameter.

To remove a point, use removePoint .

Here is an example that adds a point at position ā€œiā€ and deletes a point at 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>
+3
source

You need to specify the x and y coordinates, otherwise it is assumed that the x coordinate is the next data point on the x axis. Try the following:

 $(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; });

});

+2
source

More articles:


All Articles