Chartjs-How to differentiate chart with colors

by

0đź‘Ť

âś…

According to the Chart.js documentation here:
http://www.chartjs.org/docs/#bar-chart ,

You need to add the “attributes” for each label you have.

In your code, I assumes that you have 3 labels, which are Men, Women, and Other.

So as example, In your code :

datasets: [
                {
                    label : 'Gender',
                    backgroundColor: 'rgba(250, 300, 100, 0.75)',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: jumlah
                }
            ]

there are only one “backgroundColor”, “borderColor”, “hoverBackgroundColor”, and “hoverBorderColor”, which is only for one label.

So what you should do is make each of the attributes as an array, like this:

backgroundColor: [
       'rgba(79, 181, 59, 1)', //green for men
       'rgba(239, 87, 196, 1)', //pink for women
       'rgba(166, 160, 164, 1)', //grey for other
],

Do it for other attributes like this.

Leave a comment