CODEWITHSUNDEEP
reactjschart.jsjsx
Lucas Dowlen
Lucas Dowlen

Reputation: 53

My Chart.js Options referencing React state are being ignored

To be clear, data{} referencing dataSets is woking the options{} referencing the state Options are not being applied to the graph. Here is my state:

  constructor(props){
    super(props);

    this.state = {
      chartData: {
        labels: ['Landmass Covered By Warder', 'Other'],
        datasets: [{
          data: [34, 64],
          backgroundColor: ['#1F2324', '#34373A'],
          borderColor: ['rgb(8,14,16)'],
        }],
      },
      // make these options work:
      options: { 
        legend: {
            labels: {
                fontColor: "blue",
                fontSize: 18
            }
          }
        }
      }
    }

I am specifically trying to change the font color of the labels but these styles aren't applied. This state is simply called from chart.js's Doughnut chart component:

      <div>
        <Doughnut 
        data={this.state.chartData}  
        options={this.state.options}
        />
      </div>

Upvotes: 0

Views: 188

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

Chart.js 3+ has a different setting on the options. Yours is the v2 settings which will be ignored.

Here is the codesandbox for your reference:

https://codesandbox.io/s/inspiring-payne-q3sw2?file=/src/App.js

  • The legend will now be under plugins
  • fontColor will be color
  • fontSize will be font: { size: xx }
options: {
    plugins: {
        legend: {
            labels: {
                color: "blue",
                font: {
                   size: 18
                }
            }
        }
    }
}

The legend config in v3:

https://www.chartjs.org/docs/master/configuration/legend.html

I think their doc has some problems which is mixing v2 and v3 syntax together sometimes. confusing people :(

Upvotes: 2

Related Questions