Search code examples
javascriptreactjsreact-chartjs

How to change 'backgroundColor' of a specific 'labels' instance in "react-chartjs-2"

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.

I don't actually know how to access the background of each instance. Does anybody know how to do that?

This is what I want to achieve: enter image description here

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.

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 = () => {
        const newArr = this.props.indexes.map(Number);
        const latestRecord = Math.max(...newArr);
        let color;
        console.log(color)
        this.state.chartData.labels.forEach(label => {

            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 (
            <div className="myChart">
                <button className="bmi-form__button" onClick={this.updateChart}>DISPLAY CHART DATA</button>
                <div className="chart">
                    <Doughnut
                        data={this.state.chartData}
                        width={100}
                        height={50}
                        options={{
                            title: {
                                display: this.props.displayTitle,
                                text: this.props.text,
                                fontSize: 25
                            }
                        }
                        }
                    />
                </div>
            </div>
        )
    }
}
Solution

  • I have achieved to apply different color for each label like this:

    const colorMap = {
    'Entertainment': '#FF6384',
    'Food': '#36A2EB',
    'Gas': '#FFCE56',
    'Other': '#38c172'
};

const labels = ['Food', 'Other'];
const colors = labels.map(l => colorMap[l]);
const chartData = {
    labels,
    datasets: [{
        backgroundColor: colors,
        borderColor: colors,
        data: []
    }]
};

<Doughnut data={chartData}/>