[Chartjs]-Set background color for individual bars using ChartJS?

by

2👍

✅

I think the issue is that the colors should be part of the dataset according to what I read in the official documentation link, try this:

var barData = {
                labels : ["Counselor","Examiner","Rock","Seeker","Uniter"],
                datasets : [{
                        // fillColor : "#48A497",
                        // strokeColor : "#48A4D1",
                        data : [100, 200, 300, 400, 500],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            ],
                        borderWidth: 1
                }]
            }

Fiddle example added:
https://jsfiddle.net/hdr4uuLy/

0👍

Bit of added info if anyone is using this…make sure this is in your head tag. I was using just Charts.JS CDN but this requires the bundle: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>

Leave a comment