[Chartjs]-Chart.js mix chart (bar + line): get lines to start at x = 0

by

2👍

This is happening because chart.js sets the offset property in the x scale to true for bar charts so the bar is in the middle of the grid instead of on the gridLine as is with line charts.

You can set the offset to false but then the first and last bar will look weird because they are half of the width.

Live example:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'red',
        borderColor: 'red'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        type: 'bar',
        backgroundColor: 'blue'
      }
    ]
  },
  options: {
    scales: {
      x: {
        offset: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>

Leave a comment