Jeff Dege Jeff Dege - 1 year ago 179
Javascript Question

Grouped bar charts, in chart.js

I've seen other javascript charting libraries that supported grouped barcharts, of the sort in the image below. I've not seen this as an explicit option in chart.js's online editor.

Is it possible to do grouped bar charts of this sort in chart.js? Is it easy? Is there a template for it in their online editor?

Answer Source

Yes, you can provide multiple data sets using the datasets property, which is an array of containing groupings of values. Each data set contains a series of values in data that correspond to the labels.

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
    labels: ["Chocolate", "Vanilla", "Strawberry"],
    datasets: [
            label: "Blue",
            fillColor: "blue",
            data: [3,7,4]
            label: "Red",
            fillColor: "red",
            data: [4,3,5]
            label: "Green",
            fillColor: "green",
            data: [7,2,6]

var myBarChart = new Chart(ctx).Bar(data, { barValueSpacing: 20 });

See this JSFiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download