score:0
Accepted answer
easyest way to do this is by removing all the data updating the chart, readding the data and the updating the chart again
const chart = new chart(ctx, options);
document.getelementbyid("tt").addeventlistener("click", () => {
const datasets = chart.data.datasets;
chart.data.datasets = [];
chart.update();
chart.data.datasets = datasets;
chart.update();
})
live example:
var options = {
type: 'doughnut',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
borderwidth: 1,
backgroundcolor: ["red", "blue", "yellow", "green", "purple", "orange"]
}]
},
options: {
scales: {}
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
const chart = new chart(ctx, options);
document.getelementbyid("tt").addeventlistener("click", () => {
const datasets = chart.data.datasets;
chart.data.datasets = [];
chart.update();
chart.data.datasets = datasets;
chart.update();
})
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<button id="tt">
reanimate
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.3.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Chart.js how to resend animation command to a chart?
- How to make bar chart animation where all bars grow at the same speed?
- Chart.js - How to show loading animation before plotting chart
- How to show/hide animation when legend clicked chart js
- How to print a chart rendered by code
- How do I destroy/update Chart Data in this chart.js code example?
- How to run Chart.js samples using source code
- how to not repeat code while creating multiple charts in chart js
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How can I make two of my lines in Chart JS thicker
- How to prevent first/last bars from being cut off in a chart with time scale
- How set color family to pie chart in chart.js
- Chart.js Bar Chart - how to chart bars from 0
- How to add an on click event to my Line chart using Chart.js
- Chart.js how to show cursor pointer for labels & legends in line chart
- How do you hide the title of a chart tooltip?
- How to put rounded corners on a Chart.js Bar chart
- chartjs : how to set custom scale in bar chart
- How can I make a stepline or stepped chart in chart.js or D3?
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to Draw Gantt chart using chart js or other libraries
- How to fix chart Legends width-height with overflow scroll in ChartJS
- How to display Line Chart dataset point labels with Chart.js?
- chart js how to fill legend box with colour
- How to add an offset to a dataset in Chart js
More Query from same tag
- Adding new data to empty Chart.js chart does not render new data correctly
- How to modify chartjs tooltip to add customized attribute
- My choice of color is not used in my stacked bar chart
- Type error in using chartjs and tc-angular-chartjs
- I am Creating pie chart using Chartjs 2.6.0. I want to show label on Slices
- How to inject "Chart.js" in my module?
- Chart js animating a line while changing x-axis labels
- How can I get access to the index of the highlighted dataset in Chart.js
- Type can not be assigned in react-chartjs-2
- How to make rectangle in chart.js
- Chart.js Version 3: how to set the different color for tick lines and gridlines
- How to show tooltip only for show x values in react charts
- Chart.js replace all data
- How to create a scatter plot where x-axis represents a day by hours with datetime object? chartJS
- Chart.js responsive pie chart
- Chart.js I want to fix my xAxis to my yAxis position 0
- Change size of a specific point on a line chart in Chart.js
- Chart JS prepend labels to x-axis with addData
- Charts js - How to make gridlines dash and How to make the gridlines stop at each point
- Chart.js Bar Chart: How to remove space between the bars in v2.3?
- Chart.js not showing legends
- Chart.js - style legend: smaller circles
- Chart.js: Get point index from chart.getPointsAtEvent(e)
- chartjs custom y axis values, different text for each one
- Charts.js: thin donut chart background
- Unable to draw a scatter chart with vue-charts
- Using data from model in Chart.js MVC c#
- Outputting multiple SQL queries in chart.js
- Chart.js line graph-removing labels on the line
- Can I offset the bars in chart.js stacked bar chart?