Grouped bar charts, in chart.js

Asked 27/1, 2015 at 22:0 Answered 2/11, 2022 at 6:58

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?

Crowe answered 27/1, 2015 at 22:0 Comment(0)

170

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.

See two slightly different examples below depending on your version of Chart.js.

Chart.js v1.x

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.

Chart.js v2.x

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

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

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        barValueSpacing: 20,
        scales: {
            yAxes: [{
                ticks: {
                    min: 0,
                }
            }]
        }
    }
});

See this JSFiddle.

Excurvate answered 27/1, 2015 at 23:20 Comment(8)

The syntax in the last line throws an error: Bar is not a function; I am using Chart.min.js 2.2.1. – Hawks 23/8, 2016 at 13:5

@TobiG. I added a Chart.js v2.x example. – Excurvate 13/10, 2016 at 17:45

@Jacub Budin Chart.js v2.x example doesn't render correctly. For Vanilla there is no green bar. – Apoplectic 4/12, 2016 at 22:45

@Apoplectic That's because the Y-axis minimum value was 2—such is Chart.js's default behavior to take the smallest value—not 0 as you expected. I've updated the example to make it more clear, but it was rendering correctly. – Excurvate 6/12, 2016 at 13:46

I'm wondering how did you find this information. I couldn't find on the documentation. – Bichromate 31/10, 2018 at 17:9

Thanks, @JacobBudin. Kindly help me with one more thing. If I want to show the respective value inside each bar then what? And if I switch the graph to horizontalBar graph then do I need to make any change except for changing the type? Thanks again.. – Attired 11/1, 2019 at 12:43

@JacobBudin Hi. How can I fix the distance between the blue, red and green bars? In my case when there is more data the bar comes close and if the data is for say only 1 then the bars are very far apart. Thanks in advance. :) – Attired 20/9, 2019 at 12:30

Good day,Everytime i execute my code, red color is incomplete, i mean no blue in the second data, but in my code i supply it very well? same in the third data. missing something – Tallbot 2/6, 2020 at 2:34

Yes,it is possible to do grouped bar charts of this sort in chart.js and so easy

Step by Step:-

Step1:-

First of all add the script link of charts.js:-

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

Step2:-

Add div in body of html'

 <body>
    <table>
      <tr>
        <td> 
          <div id="chart_div"  style="width: 800px; height: 300px;">
          </div> 
         </td>
      </tr>
    </table>
  </body>

Step3:-

<script>
var densityCanvas = document.getElementById("densityChart");


var Data1 = {
 label: 'A',
  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderColor: 'rgba(99, 132, 0, 1)',
  yAxisID: "y-axis-gravity"
}
var Data2 = {
 label: 'B',
  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderColor: 'rgba(99, 132, 0, 1)',
  //yAxisID: "y-axis-gravity"
}
var Data3 = {
 label: 'C',
  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderColor: 'rgba(99, 132, 0, 1)',
  //yAxisID: "y-axis-gravity"
}

Note-:You can make multiple Var data which you want to display and only give the yAxisID to one var Data which then display as one group yaxis

var planetData = {
  labels: ["A", "B", "C"],
  datasets: [Data1,Data2, Data3 ]
};
 
var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.4
    }],
    yAxes: [{
      id: "y-axis-Registered"
    } 
    ]
    }
};
 
var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: planetData,
  options: chartOptions
});
</script>

Note:- When I am trying to use this offline Chart.js library and create chart for my case then this pretty solution helps me a lot :-

In picture Last Look:- In picture Last Look

Interpolation answered 2/11, 2022 at 6:58 Comment(0)

Chart.js v1.x

Chart.js v2.x

Recommended topics

Hot tags