Please, tell us how to recreate the issue in as much detail as possible.
When async. updating the values of a pie chart, the pie chart is not correctly redrawn. One can see that the values are correctly set, because the annotations of the slices in the pie chart show the updated values. However, the slices of the pie are not redrawn and keep the ratios of the previously set values.
This is a bug in highcharts not the plugin. I therefore close the issue. Issue can be circumvented by setting data array with different length. This forces a redraw
Which platform(s) does your issue occur on?
Please, provide the following version numbers that your issue occurs with:
Please, tell us how to recreate the issue in as much detail as possible.
When async. updating the values of a pie chart, the pie chart is not correctly redrawn. One can see that the values are correctly set, because the annotations of the slices in the pie chart show the updated values. However, the slices of the pie are not redrawn and keep the ratios of the previously set values.
Describe the steps to reproduce it.
chartOptions: any = { chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 65, beta: 0 }, marginTop: 0, marginBottom: 15, marginLeft: 0, marginRight: 0 }, legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom', floating: true, enabled: true, itemStyle: { color: '#6E6E6E', fontSize: '12px', fontWeight: 'normal' }, y: 8 }, exporting: { enabled: false }, credits: { enabled: false }, title: { text: 'Carbohydrate Decomposition of last Week', style: { color: '#377576', fontSize: '12px', fontWeight: 'bold' } }, plotOptions: { pie: { dataLabels: { distance: '10%', enabled: true, useHTML: true, formatter: // tslint:disable-next-line: quotemark "function () { return '<span style=\"font-size:12px; color:#6E6E6E;margin-bottom:20px; font-weight: normal;\">' + this.y + '%</span>';}" }, allowPointSelect: false, depth: 15, showInLegend: true } }, series: [ { type: 'pie', animation: true, enableMouseTracking: false, data: [ { name: 'Dietary Fiber', y: 33.3, color: '#FECB02' }, { name: 'Sugar', y: 33.3, color: '#e63e11' }, { name: 'Other', color: '#85bb2f', y: 33.3 } ] } ] };