How to add padding to the vertical scale (X-axis) in Chart.js?

lampshade picture lampshade · Nov 9, 2016 · Viewed 12.5k times · Source

According to the "Tick Configuration" of Chart.js version 2.3 it is only possible to set a padding for the ticks on the Y-axis ("horizontal scale"):

padding | Number |10 | Padding between the tick label and the axis. Note: Only applicable to horizontal scales.

And this works like a charm:

scales: {
    yAxes: [{
        ticks: {
            padding: 20,
        }
    }],
    xAxes: [{
        ticks: {
             // how to set padding here?
        }
    }]
}

But the draft says, that I need some padding on the X-axis as well

enter image description here

How can I achieve this using Chart.js?

Maybe it's possible using a plugin?

Answer

rpearce picture rpearce · Jan 17, 2019

Late to the game here, but the solution with latest Chart.js is to include this in your options parameter:

{
  scales: {
    xAxes: [
      {
        ticks: {
          padding: 20
        }
      }
    ]
  }
}