score:0
You can modify the data used by the chart directly.
From there documentation
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
Here you can pass the new data with the reference to the chart object. You can save the reference wwhen you create new Chart(...)
.
This is helpful to render the charts faster and in a smooth manner.
score:1
Chart.js provides a helper class from which you can access all the chart instances on a page.
If you want to destroy all the instances before update/reload use the following code:
Chart.helpers.each(Chart.instances, function (instance) {
instance.destroy();
});
If you want to destroy a particular chart using the canvas id, use the following code:
Chart.helpers.each(Chart.instances, function (instance) {
if (instance.chart.canvas.id === "yourChartId") {
instance.destroy();
return;
}
});
Source: stackoverflow.com
Related Query
- How do I destroy/update Chart Data in this chart.js code example?
- How to update data Chart in async way in Angular Chart.js?
- How to destroy chart object in order to change chart data dynamically (Chart.js)?
- How to dynamically update data of line chart used with chart Js?
- chart js tooltip how to control the data that show
- How to display data labels outside in pie chart with lines in ionic
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- Chart js: Update line chart having two data sets
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How to add comma in this chart js
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chartjs in Reactjs - how can I update data dynamically?
- Angular chart how to show the legend data value by default along with legend name
- How to create chartjs chart with data from database C#
- update chart data called through ajax via PHP, MySQL
- How to commaize the data values provided to a chart in Chart.JS?
- Using chart js version 3, how to add custom data to external tooltip?
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Chart.js - How to update data
- how to display chart data as html table chartjs
- How to use JSON data in creating a chart with chartjs?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How to display chart using Chartjs with JSON data in Laravel
- How do I get a chart.js chart to display data in a Node/React web application?
- How to update a chart using VueJS and ChartJS
- Unexpected error when attempting to update chart data in Chart.js, in a Vue app
- chart.js pie chart - how to update dataset with smooth transition
- How do I display chart on my HTML page based on JSON data sent by Node JS
More Query from same tag
- Rendering a chart.js component twice in a page
- How to set global/specific properies when updating line-chart using Chart.js?
- Data-labeling ChartJS, Removing Duplicates?
- Chart.js set active segment on initialize
- Display labels on bar chart using Chart.js
- Using Chart.js with Pyramid Web Framework
- Configuring locale with bundled (CDN) chartjs-adapter-date-fns.bundle.min.js?
- Chart.js - Pie chart calculate sum of visible values after legend click
- How to increase right spacing in Chart.js 2.6.0?
- How to create Chart with 2 variables (x,,y)
- How to display label inside pie chart in Chartkick?
- Getting "TypeError: document.getElementById(...) is null" when using react.js with chart.js
- Chartjs - Stacked bar chart blocking other values
- Using unknown number of datasets in Chart.js
- Is it possible to create just header tip visible bar chart with chart js just like in image
- Why is Chart.JS linking my start and end nodes in the line chart?
- Chart.js pie chart to display "No Data" if the datasets are empty
- gradient background on radar chartjs
- Angular-Charts bar chart does not update when I change the data, series, labels
- Angular with ng2charts for bar chart shows NAN% when no data present
- How to filter shadow or Drop Shadow in Chart.js?
- part 2 - how to group duplicate labels in order to create a label without duplicates in chart.js
- How can I increase the size of the pie (Chart.JS)?
- Chart.js polar chart
- Chart.js two categorical scales
- How do I update the chart to reflect local storage values?
- How to add a Date Selector to Chartjs in the context of Vue.js
- Show labels on each sector to polar chart using angular js chart
- How to draw a horizontal line over bar columns in Chart.js that's started from X axis?
- Chart.JS - show values on top of points