Overview – Updating StockChart Options / Data

As you have already learnt how to create basic StockChart in Getting Started section, let’s see how it can be updated dynamically. In this section, you will learn about updating the StockChart and some of the best practices to be followed to achieve best performance and avoid any memory leaks.


In order to update StockChart, you need to update options object and then call stockChart.render().

options object can be accessed via stockChart.options as shown below:

stockChart.options.title.text = "Updated StockChart Title";
stockChart.options.charts[0].data[0].dataPoints.push({y: 23}); // Add a new dataPoint to dataPoints array
stockChart.options.charts[0].data[0].dataPoints[3].y = 27; // Update an existing dataPoint


Below example shows how to add and update dataPoint.


Try it Yourself by Editing the Code below.
Note
  • You should remember to call stockChart.render() after setting/updating the options – try to batch all updates before calling stockChart.render() for best performance.




If you have any questions, please feel free to ask in our forums.