Chartjs-Chart.js: Creating a Barchart with overlaying and offset Bars

by

0👍

✅

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterUpdate hook to shift (offset) the x positions of the bars from the second dataset.

Please have a look at your amended code below.

const offset = 22;
var myChart = new Chart(document.getElementById('Chart'), {
  type: 'bar',
  plugins: [{
    afterUpdate: function(chart) {
      var dataset = chart.config.data.datasets[1];
      for (var i = 0; i < dataset._meta[0].data.length; i++) {
        var model = dataset._meta[0].data[i]._model;
        model.x += offset;
        model.controlPointNextX += offset;
        model.controlPointPreviousX += offset;
      }
    }
  }],
  data: {
    labels: ['Red', 'Blue', 'Orange', 'Green'],
    datasets: [{
      label: 'Vote Share Now',
      data: [25.5, 22.7, 8.6, 5.5],
      backgroundColor: [
        'rgba(250,0,0,0.7)',
        'rgba(0,17,255, 0.7)',
        'rgba(255,155,0, 0.7)',
        'rgba(0,255,9,0.7)'
      ],
      categoryPercentage: 0.8,
      barPercentage: 0.9,
      xAxisID: "Now",
    }, {
      label: 'Vote Share Then',
      data: [22.5, 29.7, 10.3, 5.3],
      backgroundColor: [
        'rgba(250,0,0,0.2)',
        'rgba(0,17,255,0.2)',
        'rgba(255,115,0,0.2)',
        'rgba(0, 255,9,0.2)'
      ],
      categoryPercentage: 0.6,
      barPercentage: 0.6,
      xAxisID: "Then",
    }]
  },
  options: {
    responsive: false,
    legend: {
      onClick: null
    },
    scales: {
      xAxes: [{
          id: "Now",
          gridLines: {
            display: false
          }
        },
        {
          id: "Then",
          offset: true,
          display: false
        }
      ],
      yAxes: [{
        ticks: {
          min: 0,
          max: 50,
          stepSize: 10,
          callback: function(value, index, values) {
            return value + '%';
          }
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="Chart" height="200"></canvas>

Leave a comment