title: How to change 'backgroundColor' of a specific 'labels' instance in "react-chartjs-2"
body: <p>I want to change the backgroundColor of only one record from 'labels' array. In my app 'labels' is set to an array of stringified numbers that come from the database. And I want the biggest number to be, let's say green. The rest should be, let's say, pink.</p>
  
  <p>I don't actually know how to access the background of each instance. 
  Does anybody know how to do that? </p>
  
  <p>This is what I want to achieve:
  <a href="https://i.stack.imgur.com/F0Grl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F0Grl.png" alt="enter image description here"></a></p>
  
  <p>This is what I was trying to do but it's just the purest form of nonsense as it doesn't work and it would change the background of the whole chart.</p>
  
  <pre><code>import React from 'react';
  import { Bar, Line, Pie, Doughnut } from 'react-chartjs-2';
  
  
  export default class Chart extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              chartData: {
                  labels: [],
                  datasets: [{
                      label: this.props.label,
                      data: [],
                      backgroundColor: '#CD5C94',
                  }]
              }
          }
      }
  
      static defaultProps = {
          displayTitle: true,
      }
  
      updateChart = () =&gt; {
          const newArr = this.props.indexes.map(Number);
          const latestRecord = Math.max(...newArr);
          let color;
          console.log(color)
          this.state.chartData.labels.forEach(label =&gt; {
  
              if (label == latestRecord) {
                  this.setState({
                      chartData: {
                          datasets: [{
                              backgroundColor: '#CD5C94',
                          }]
                      }
                  })
              } else {
                  this.setState({
                      chartData: {
                          datasets: [{
                              backgroundColor: '#CD5C94',
                          }]
                      }
                  })
  
              }
          })
  
          this.setState({
              chartData: {
                  labels: this.props.indexes, //this is the array of numbers as strings
                  datasets: [{
                      label: this.props.label, //this is the label of the chart
                      data: this.props.results, //this is the array of total travel cost records 
                      // backgroundColor: ,
                  }]
              }
          })
      }
  
  
      render() {
  
          return (
              &lt;div className="myChart"&gt;
                  &lt;button className="bmi-form__button" onClick={this.updateChart}&gt;DISPLAY CHART DATA&lt;/button&gt;
                  &lt;div className="chart"&gt;
                      &lt;Doughnut
                          data={this.state.chartData}
                          width={100}
                          height={50}
                          options={{
                              title: {
                                  display: this.props.displayTitle,
                                  text: this.props.text,
                                  fontSize: 25
                              }
                          }
                          }
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>