Colors of points in line chart doesn't update when chart.update("none") is set

[AsgerMogensen]

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

[abdul2801]

Quick Fix for now =>

newChart.options.animation = { duration: 0 };

Looking into the issue

[Tomkndn]

So why to use chart.update("none") when chart.update() is working properly.

[aryab2003]

Can we go about by manually changing the color for each dataset and after updation call chart.update()?

[AsgerMogensen]

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

[AsgerMogensen]

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.

[aryab2003]

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.

[aryab2003]

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?

[aryab2003]

@AsgerMogensen Could you please help me as to where to make my changes?

[AsgerMogensen]

I'm not quite sure what to reply?

This approach seems to work:

> newChart.update({
>     duration: 1000, 
>     onComplete: function() {}
>})

[Avinash-o1]

hi there , this is the reproducible sample of issue with fixes:
https://codepen.io/rwyvbfow-the-bold/pen/MWZVvjv

[aryab2003]

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]

@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.