score:0
i ran into a similar situation and i ended up disabling the animation, which obviously solved the problem, but because it looked a bit less dazzling the customer did not like the solution, in the end i had to utilise a hack.
not sure if this will work for you, but in my case it did, you do this by using settimeout to 1 millisecond.
run the update & then set a timeout for a millisecond & run the update again. if this doesn't work, try setting arbitrary data (instead of emptying the data) & then updating to the correct dataset a millisecond later.
in my instance:
refreshscope( endscope ) {
if(this.current_scope == 'today') {
this.current_scope = `week`; // opposite (changes data on watcher)
} else {
this.current_scope = `today`; // opposite again.
}
settimeout(() => {
this.current_scope = `${endscope}`;
}, 1);
}
there are of course other (better) options you can employ, as outlined by chartjs' performance page:
https://www.chartjs.org/docs/3.1.1/general/performance.html
and ultimately disabling animation will make it seem accurate - not stutter, albeit less dazzling, and not require hacks.
disabling animation:
new chart(ctx, {
type: 'line',
data: data,
options: {
animation: false
}
});
Source: stackoverflow.com
Related Query
- How to update ChartJS in a long polling & stop animation stuttering?
- How to add ChartJS code in Html2Pdf to view image
- Chartjs in Reactjs - how can I update data dynamically?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to update a chart using VueJS and ChartJS
- chartjs how to apply after animation
- chartjs how to update dynamically data from database(Chartjs cant get the data)
- How to update Chartjs chart (react-chartjs-2) with dynamic data?
- My Chartjs is not updating after setstate full code attached Reactjs Update
- How to stop chartjs zoom more than visible points?
- How can I update my ChartJS in real time (It's works only when I zoom-in and zoom-out)
- How to dynamically update Chartjs legend label colors?
- How to update Chartjs in Reactjs?
- How to set ChartJS animation speed?
- Chartjs - How to update the data from values in my database?
- How to run Chart.js samples using source code
- How to update with animation a Pie Chart?
- Dynamically update values of a chartjs chart
- How to set ChartJS Y axis title?
- How to disable chartjs legendclick
- how to change size of point in ChartJS
- How to disable a tooltip for a specific dataset in ChartJS
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How to modify bar width in Chartjs 2 bar charts
- ChartJs 2.0 How do I obtain point information being clicked upon?
- how to plot multiple time series in chartjs where each time series has different times
- How to make integer scale in Chartjs
- How get sum of total values in stackedBar ChartJs
- chartjs : how to set custom scale in bar chart
- Dynamically update the options of a chart in chartjs using Javascript
More Query from same tag
- [MIXED CHART.JS]How do I manipulate the label of each chart's tooltips?
- Chart.JS format date in label
- Create space between legend and chart in charts.js
- django 'LineChart' object has no attribute 'get'
- How to apply gradient color in chart.js?
- Type can not be assigned in react-chartjs-2
- Chart.js: Is it able to connect two points of data where there are no data between them?
- Full size download Chartjs canvas on mobile device
- Chart.js : Multiple colors for tooltipFontColor
- Chartjs initial animation want to change from left to right (default it is bottom to top)
- chart.js show no charts in IE11
- Reference external JS method in Chart.js callback using Chartjs.ror
- Chart.js - Writing Labels Inside of Horizontal Bars?
- Chart js logarithmic line chart showing NaN values instead of null
- Dynamic chart codeigniter
- Unable to set Global Options in Chart.js
- Reduce space between ticks in horizontal bar-chart chartJS
- Chartjs render only the last in loop (ionic)
- How to offset the legends of the bars in a "chart.js" bar chart?
- How to add comma in this chart js
- Chart.js 2.0.0-beta2 disable points on line Charts
- How to draw border all the way around bar element
- chartjs; cannot read property '0' of undefined
- Vue Chart.js -- can I give a line chart a default value for missing data?
- how to dynamically render and update chart.js line graph
- Limit labels number on Chart.js line chart
- How to remove the line/rule of an axis in Chart.js?
- Multiple add in multiple sql request?
- Chart.js jQuery dropdown selected values
- Chart Js clickable bar