Highcharts - Y-axis Padding In A Bar Chart

I use a style of y-axis labels in which each number is placed, left-aligned, on top of its respective horizontal grid line, like in the image below. The only complication with this

Solution 1:

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, //SamevalueasoffsettickPosition:"inside",
  tickWidth:1,
  tickColor:"black", //ThesameasyourgridLinecolorlabels: { 
    align:'left',
    x:0,
    y:-8//PositionlabelsabovetheirgridLine/tickMark
  }
}                                   

For a demo, see http://jsfiddle.net/supertrue/NWsgz/2/

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.

Solution 2:

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: http://jsfiddle.net/NWsgz/4/

Solution 3:

You can use offset parameter for yAxis http://api.highcharts.com/highcharts#yAxis.offset