chartjs
Colors of points in line chart doesn't update when chart.update("none") is set
Expected behavior
I wrote a function that changes the colors of every dataset in the chart when a button is pressed. When pressed i would expect the color of the line, line fill, point and point fill to change with no animation because chart.update("none") is set.
How i expect the chart to look after color change (original color is black)
Current behavior
When i press the button the color of the line and line fill changes like it should, but the color of the point and point fill doesn't change. However when i hover over a point it shows the correct color and when i hide a dataset, the entire chart updates and all colors are then correct.
This only happens when chart.update("none") is set and not when just using chart.update().
Whether i use borderColor and backgroundColor or pointBorderColor and pointBackgroundColor the behaviour is the same
How the chart actually looks after color change (original color is black)
Reproducible sample
https://codepen.io/AsgMog/pen/zYyRWzz
Optional extra steps/info to reproduce
No response
Possible solution
No response
Context
I'm trying to create a button that changes the color of the chart without the change being animated.
chart.js version
v4.4.0
Browser name and version
Firefox 115.2.1esr
Link to your project
No response
Quick Fix for now =>
newChart.options.animation = { duration: 0 };
Looking into the issue
So why to use chart.update("none") when chart.update() is working properly.
Can we go about by manually changing the color for each dataset and after updation call chart.update()?
Can we go about by manually changing the color for each dataset and after updation call chart.update()?
Do you mean like this?
function changeColors() {
//Change colors here...
newChart.update("none");
newChart.update()
};
This works, but it still shows the wrong colors briefly in the animation
So why to use chart.update("none") when chart.update() is working properly.
Context I'm trying to create a button that changes the color of the chart without the change being animated.
Can we go about by manually changing the color for each dataset and after updation call chart.update()?
Do you mean like this?
function changeColors() { //Change colors here... newChart.update("none"); newChart.update() };This works, but it still shows the wrong colors briefly in the animation
Can we go about by manually changing the color for each dataset and after updation call chart.update()?
Do you mean like this?
function changeColors() { //Change colors here... newChart.update("none"); newChart.update() };This works, but it still shows the wrong colors briefly in the animation
I'm looking into it.
function changeColors() {
newChart.data.datasets.forEach(function(dataset, datasetIndex) {
dataset.backgroundColor = 'new-color-value';
});
newChart.update({
duration: 1000,
onComplete: function() {
} }); } Can i approach the issue in this way?
I'm not quite sure what to reply?
This approach seems to work:
> newChart.update({
> duration: 1000,
> onComplete: function() {}
>})
hi there , this is the reproducible sample of issue with fixes: https://codepen.io/rwyvbfow-the-bold/pen/MWZVvjv
I'm not quite sure what to reply?
This approach seems to work:
> newChart.update({ > duration: 1000, > onComplete: function() {} >})
@AsgerMogensen ok,so can i go about making the following changes?
@AsgerMogensen ok,so can i go about making the following changes?
I'm still not sure what to reply. What am i confirming?
Your solution changes the colors correctly, but it has occurred to me, that it's animated. There never was any problem when the update was animated.