[Chartjs]-Horizontal bar with multiple sections in ChartJs

by

6đź‘Ť

âś…

This plot type is called “stacked bar” and is included in the Chart.js samples. The documentation is quite clear.

Here’s a working example:

new Chart(document.getElementById("chart"), {
  type: "horizontalBar",
  data: {
    labels: ["A", "B"],
    datasets: [{
        data: [1, 4],
        backgroundColor: "#0033a0"
      },
      {
        data: [3, 1],
        backgroundColor: "#1a79bf"
      },
      {
        data: [2, 2],
        backgroundColor: "#b2b2b2"
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>

Leave a comment