You must be logged in to post your query.
Home › Forums › Chart Support › How to re-render when the dataPoints value changed in vuejs?
According to https://canvasjs.com/fdm/samples/vuejs-canvasjs-chart-samples/
When click the button ‘test’ the value was changed to ’40’ but the chart is not uppdated. https://stackblitz.com/edit/stackblitz-starters-qrkrwc?file=src%2Fpages%2FIndexPage.vue
@bomb,
Updating datapoint value via chart option and re-rendering the chart seems to be working fine. To do so, you need to get the reference to the chart by passing the call-back function like @chart-ref="chartRef" to the component. Please refer to the code-snippet below.
@chart-ref="chartRef"
// Getting Chart Reference <CanvasJSChart :options="options" @chart-ref="chartRef" /> chartRef(chart) { this.chart = chart; } // Updating Datapoint value this.chart.options.data[0].dataPoints.filter( (item) => (item.label == 'apple') )[0].y = 40; this.chart.render();
Please take a look at this updated Stackblitz for complete code.
— Vishwas R Team CanvasJS
You must be logged in to reply to this topic. Login/Register