Chartjs-Chartjs add space betwen stacked bar

by

1👍

✅

The options.layout.padding is just adding space around the chart area and not between data elements.
I’m doing something like that with a simple plugin, changing the base of the bar element, at runtime.

EDIT: the plugin has been updated in order to avoid bugs when chart hovering.

See snippet:

const ctx = document.getElementById("myChart");
const plugin = {
  id: 'fillGaps',
  beforeDatasetDraw(chart, args) {
    if (args.index > 0 && chart.isDatasetVisible(args.index)) {
      args.meta.data.forEach(function(item, i) {
         const {width} = item.getProps(['width'], true);
         item.base = item.x - width + 3;
      });
    }
  }
};
const myChart = new Chart(ctx, {
    type: 'bar',
    plugins: [plugin],
    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: false,
        },
        {
            label: 'user 2 online',
            data: [50, 35, 45, 47, 10, 3, 27],
            backgroundColor: 'orange',
            borderWidth: 0,
            borderSkipped: false,
        }]
    },
    options: {
      indexAxis: 'y',
      //animation: false,
      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