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

Question

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

How can I achieve this using Chart.js?

Maybe it's possible using a plugin?

Cabot

Were you able to get a solution for this? I'm in the same boat :-) – Kratzer

@JesseSchutt Unfortunately not. – Cabot

how did you accomplish the space between tick 1 and 2? @Cabot – Jaela

@Cabot off-topic comment, but can you share your chart JS conf because I am trying to create the same chart. – Hoopes

Answer 1

Add this to your options parameter:

options: {
   scales: {
       x: {
        ticks: {
           padding: 10
        }
    }
 }

Colston

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Tune

Answer 2

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
        }
      }
    ]
  }
}

Natiha

Answer 3

Pass value to 'tickMarkLength' in options--> scales--> xAxes--> gridLines

xAxes: [{
  gridLines: {
   tickMarkLength: 10
},

Extracanonical

Answer 4

The correct answer is the following for version 2.8:

options: {
    scales: {
        xAxes: [{
            ticks: {
                padding: 100
            }
        }], 
    }
}

Pinfeather

Answer 5

For echarts version 5:

grid: {
    left: '3%',
    right: '10%',
    bottom: '3%',
    containLabel: true
  },

Micronucleus