How to increase space between label and chart area in chart.js

Question

All my labels are on the top of the bars. I can see this this image

but I want that would be like this this image padding doesn't work for xAxes, but works for yAxes

    legend: {display: false},
    scales: {
      xAxes: [{
        position: 'top',
        stacked: true,
        ticks: {
          stepSize: 1,
          min: 0,
          autoSkip: false,
          fontColor: '#3f7ba2',
          fontStyle: 600,
          fontFamily: 'Italic',
        },
        gridLines: {
          color: '#dedfe7',
          tickMarkLength: 0,
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          min: 0,
          fontColor: '#62aae8',
          padding: 5
        },
        gridLines: {
          color: '#dedfe7' //b5cce2
        }
      }],
    }

user_8682983 · Answer

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);

How to increase space between label and chart area in chart.js

1 Answers