Highcharts - redraw vs new Highcharts chart

Question

I m struggling to understand the correct way to update a highcharts chart   Supposing I have rendered a chart  and then I want to update it in some way   For instance  I may want to change the values of the data series  or I may want to enable dataLabels   At the moment the only way I can figure out how to do this is to alter the chart options  and use new Highcharts chart to tell highcharts to redraw   However  I m wondering whether this may be overkill and it might be possible to alter the chart  in situ   without having to start from scratch with new Highcharts chart   I notice there is a redraw   method  but I can t seem to get it to work   Any help is very much appreciated   Thanks   Robin  Sample code is as follows and at the bottom there is a jsFiddle    document  ready function      chartOptions         chart            renderTo   container           type   area              series             data   1 2 3             chart1   new Highcharts Chart chartOptions     chartOptions series 0  data   10 5 2   chart1   new Highcharts Chart chartOptions      The following seems to have no effect chart1 series 0  data    2 4 4   chart1 redraw            http   jsfiddle net sUXsu 18    edit    For any future viewers of this question  it s worth noting there is no method to hide and show dataLabels   The following shows how to do it  http   jsfiddle net supertrue tCF8Y

User · Answer

RobinL as mentioned in previous comments  you can use chart series n  setData    First you need to make sure you   ve assigned a chart instance to the chart variable  that way it adopts all the properties and methods you need to access and manipulate the chart   I   ve also used the second parameter of setData   and had it false  to prevent automatic rendering of the chart  This was because I have multiple data series  so I   ll rather update each of them  with render false  and then running chart redraw    This multiplied performance  I   m having 10 000-100 000 data points and refreshing the data set every 50 milliseconds

User · Answer

var newData    1 2 3 4 5 6 7   var chart       chartjs   highcharts    chart series 0  setData newData  true     Explanation  Variable newData contains value that want to update in chart  Variable chart is an object of a chart  setData is a method provided by highchart to update data   Method setData contains two parameters  in first parameter we need to pass new value as array and second param is Boolean value  If true then chart updates itself and if false then we have to use redraw   method to update chart  i e chart redraw      http   jsfiddle net NxEnH 8

User · Answer

you have to call set and add functions on chart object before calling redraw   chart xAxis 0  setCategories  2 4 5 6 7   false    chart addSeries       name   acx       data   4 5 6 7 8     false    chart redraw

User · Answer

chart series 0  setData data true    The setData method itself will call the redraw method

[javascript] Highcharts - redraw() vs. new Highcharts.chart

Examples related to javascript

Examples related to highcharts