[Chartjs]-How to increase space between label and chart area?

by

4👍

✅

This is an issue that only persists in chart.js version 2.6.0 and lower. As you can read in the release notes under the bug fixes it says that in PR 4403 ticks.padding option now applies to vertical and horizontal scales.

So to solve your issue you will need to update to a version of chart.js higher or equal to 2.7.0

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        position: 'top',
        ticks: {
          padding: 100
        }
      }],
    }
  }
}

const 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/2.7.0/Chart.js"></script>
</body>

Leave a comment