[Chartjs]-Grouped bar charts, in chart.js

by

164👍

✅

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.

2👍

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

Leave a comment