Chartjs-How can I set 3 color to the same chartjs bar?

by

0👍

I am not sure if you can apply three colors to the same “bar” (which is a relative term here). But I do know you have the ability to create stacked charts like in this example here:

https://www.chartjs.org/samples/latest/charts/bar/stacked.html

The key is to pass the stacked property as true when setting your chart options. Example:

...
options: {
    title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked'
    },
    tooltips: {
        mode: 'index',
        intersect: false
    },
    responsive: true,
    scales: {
        xAxes: [{
            // MAGIC HERE
            stacked: true,
        }],
        yAxes: [{
            // AND HERE
            stacked: true
        }]
    }
}

I hope this can help you.

Leave a comment