Accepted answer

It doesn't work for categorized axis - in that type,axis is divided into equal categories, so min/max padding isn't allowed.

Possible solution is to use standard axis, but use formatter for axis, see:


You can use offset parameter for yAxis


I've come up with a workaround, but it is not perfect.

  1. Separate the yAxis from the chart using yAxis.offset
  2. Use extra-long tick marks to simulate the gridlines extending off to the left

Like this:

yAxis: {
  offset: 30,
  tickLength: 30, // Same value as offset
  tickPosition: "inside",
  tickWidth: 1,
  tickColor: "black", // The same as your gridLine color
  labels: { 
    align: 'left',
    x: 0,
    y: -8 // Position labels above their gridLine/tickMark

For a demo, see

Why it's not ideal

I want my gridLines to use a dash style (e.g. dashStyle: 'longdash'), but there doesn't appear to be a way to apply a dash style to tick marks.

I would love to hear if there's a way to do this, or a better workaround.

Related Query

More Query from same tag