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