[Chartjs]-Fill gap between stacked bars in chart.js

by

1👍

✅

What you need it is not configurable by any options.
Nevertheless you can use a plugin to change the base of the bar to draw, taking care of the border radius.

EDIT: I have found a specific option in bar element, base, which should address the use case.

See snippet:

const ctx = document.getElementById("myChart");
// not used but leave it
const plugin = {
  id: 'fillGaps',
  beforeDatasetDraw(chart, args) {
    if (args.index > 0) {
      args.meta.data.forEach(function(item){
        const pre = item.base;
        item.base += 12;
      });
    }
  },
};
//
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'user 1 online',
            data: [50, 35, 45, 47, 10, 3, 27],
            backgroundColor: 'rgba(40, 139, 170, 1)',
            borderWidth: 0,
            borderSkipped: 'start',
            base: 0
        },
        {
            label: 'user 2 online',
            data: [50, 35, 45, 47, 10, 3, 27],
            backgroundColor: 'orange',
            borderWidth: 0,
            borderSkipped: 'start',
            base: 0
        }]
    },
    options: {
      elements: {
        bar: {
          borderRadius: {
            topLeft: 12,
            topRight: 12,
            bottomLeft: 12, 
            bottomRight: 12
          },
        }
      },
      scales: {
        y: {
          stacked: true,
        },
        x: {
          stacked: true,
        }
      }
    }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment