Custom bar chart colors appear as gray on dynamically updating charts

[AdeelK93]

With the newest version of react-chartjs-2 (1.5.5), dynamically updating bar charts with custom color sets (as in each bar chart color is individually defined) all appear as gray.

This was not an issue in 1.5.4, this does not affect dynamically updating donut charts, this does not affect dynamically updating bar charts with a fixed color scheme, and this does not affect static bar charts with custom color schemes. It is only when that bar chart has its data updated that everything turns gray.

Loving the new animation set for the charts, let me know if there's more information I can provide to help resolve this issue!

[jerairrest]

Hey @AdeelK93! Do you have a quick example of this happening?

[AdeelK93]

Ok so it looks like the fact that the bars are gray seems to be due to initializing the chart before my REST api is able to figure out what color everything is supposed to be, so it defaults to gray. The real issue is that the colors seem to be fixed and do not update. I created a quick demo of this:

import React from 'react';
import { Bar } from 'react-chartjs-2';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: '1,2,3,4', color: 'red,green,blue,orange'
    };
  }
  handleChangeData = (event) => this.setState({data: event.target.value});
  handleChangeColor = (event) => this.setState({color: event.target.value});

  render() {
    return (
      <div className="App">
        Numeric data (comma-separated):
        <input type="text" value={this.state.data} onChange={this.handleChangeData} />
        Color names:
        <input type="text" value={this.state.color} onChange={this.handleChangeColor} />
        <br/>
        <Bar
          data={dataGenerator(this.state.data, this.state.color)}
          options={{legend: {display: false},
          scales: {
            yAxes: [{ticks: {beginAtZero:true}}]
          }}}
        />
      </div>
    );
  }
}

// Turns the input strings into a charts.js dataset
function dataGenerator(data,color) {
  const dataset = {
    labels: color.split(','),
    datasets: [
      {
        backgroundColor: color.split(','),
        data: data.split(',').map(i => parseFloat(i))
      }
    ]
  }
  console.log(dataset);
  return dataset
}

export default App;

There are two input fields at the top, one to handle the bar height, one to handle the bar color. The animation is not as nice in 1.5.4, but the colors do update. This is unfortunately not the case in 1.5.5. The colors are fixed at initialization on this version.

[jerairrest]

Gotcha! Let me dig deeper into this and get a patch in as soon as I have time. Cheers!

[adambowles]

Same issue here

[jerairrest]

Fixed! See #72

[AdeelK93]

This is working perfectly! Really appreciate your hard work on this!

[plhosk]

I ran into a small issue in my app with this update. It was relying on the old behaviour of not responding to colour changes (I was choosing a random colour for the chart in the render function, which I now realize is poor practice in React). So with version 1.5.6 my app became very slow in rendering a long list of charts because they would all change to a new colour (complete with fade animation) whenever I changed the list order. Each chart is in a PureComponent and the values of the props don't change so I'm not even sure why they all re-render (I'm still learning as you can tell). Anyways thanks for your work on this module.

[AdeelK93]

So do you not want your charts to update with new colors? You could use ComponentWillUpdate to limit whether or not the charts should rerender after the component's props update. Do you have an example of how your component is structured?

[plhosk]

One of my props is a nested array which is getting replaced by a new array with the same values (due to how my Redux reducers are written) so the shallow equality check was failing every time, causing the chart to get re-rendered. Because of the change in 1.5.6 the Virtual DOM of the re-rendered chart was different compared to the original because of the randomly selected color, so it re-rendered the actual DOM as well resulting in a big performance drop.

I implemented shouldComponentUpdate with a routine that compares some values of the nested array and now it performs even better than it did originally (the render function doesn't get called with the same data values).

Anyways it's interesting how a "patch" version increment in this module managed to break my code, or at least make it behave differently than before (I guess one could say it exposed a bug in my own code due to me not adhering to React best practices).

[AdeelK93]

shouldComponentUpdate is what I meant, glad you managed to get your render to make sense!

[pavan168]

Thanks for the fix!

[tewrisFront]

Hello
I am going to create chart like this.
Please let me know.
How can I change text color

[vijaykanthm28]

How can I change backgroudColor using CSS variables like

backgroundColor: [var(--main-primary-color-50), var(--main-primary-color-20), var(--main-primary-color-10)];