Chartjs-Subcategories for each bar in multibar chart using chartjs

by

0👍

You can use grouped bar chart, like here: 

const datasets = [{
    label: "red",
    backgroundColor: "red",
    data: [33, 91, null, 48]
  }, {
    label: "blue",
    backgroundColor: "blue",
    data: [38, 57, 75, 84]
  },
  {
    label: "yellow",
    backgroundColor: "yellow",
    data: [97, null, 67, 41]
  }
];

new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels: ["one", "two", "three", "four"],
    datasets
  },
  options: {
    title: {
      display: true,
      text: 'Grouped bar chart'
    },
    scales: {
      xAxes: [{
        ticks: {
          callback: function(label, index, labels, chart) {
            let result = "" // initialize
            datasets.forEach((dataset) => {
              if (dataset.data[index] !== null) {
                result += (result.length > 0 ? ', ' : '') + dataset.label;
              }
            })
            return result
          }
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

Here you can find more options and explanation: https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/

Leave a comment