[Chartjs]-Angular Overlapping bars using chart.js

by

1👍

Not sure what issue you were facing, since you provided minimum details of your code. So, this is all I can give you as an answer, your options looks good, just the stack for x axis is false. This is how a sample of chart will look like or refer to stackblitz:

var chartInstance = new Chart(document.getElementById("chartJSContainer"), {
  type: 'bar',
  data: {

    labels: ["A", "B", "C", "D", "E", "G"],
    datasets: [{
      data: [40, 220, 15, 16, 24, 212],
      label: "Asia",
      backgroundColor: "#7b8dfd"
    }, {
      data: [86, 114, 10, 106, 107, 111],
      label: "Africa",
      backgroundColor: "#fa9cb0"
    }]
  },
  options: {
    indexAxis: 'y',
    scales: {
      xAxes: {
        stacked: false //Make it true to make the overlapping bars visible.
      },
      yAxes: {
        stacked: true
      }
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.1/dist/chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Leave a comment