score:0

try this

var mybarchart = new chart(ctx).bar(dataset, options);  

 var dataset = {
    labels: ["a", "b", "c", "d", "e", "f", "g"], // optional labels
    datasets: [  // array of data
        {
            label: "bar - set 1",
            fillcolor: "rgba(220,220,220,0.5)",
            strokecolor: "rgba(220,220,220,0.8)",
            highlightfill: "rgba(220,220,220,0.75)",
            highlightstroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "bar - set 2",
            fillcolor: "rgba(151,187,205,0.5)",
            strokecolor: "rgba(151,187,205,0.8)",
            highlightfill: "rgba(151,187,205,0.75)",
            highlightstroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
 //ect..
};

score:0

you can access the datasets and their single bars using an indexer (like an array):

mybarchart.datasets[0].bars[0].fillcolor = "#2ecc71";
mybarchart.datasets[0].bars[0].highlightfill = "#58d68d";
mybarchart.datasets[0].bars[1].fillcolor = "#3498db";
mybarchart.datasets[0].bars[1].highlightfill = "#5dade2";

score:0

in chartjs 2.4.0, you may assign a different color for each element in your dataset[idx].data array

i.e.

....
data: [65, 59, 80, 81, 56, 55, 40],
backgroundcolor: ["#5e4fa2", "#745998", "#8a638d", "#a06d83", "#b57678", "#cb806e", "#e18a63"]

link to reference: http://www.chartjs.org/docs/latest/charts/bar.html


Related Query

More Query from same tag