Highcharts categories adjust yAxis.labels.y to bottom of lane

Question

Using Highcharts and categories on the yAxis, how can I make the category label display near the bottom of the category/lane rather than the middle? Looking for something like verticalAlign: 'bottom'.

Similar to this example I tried adjusting the yAxis.labels.y value (which does cause it to move) but because the tick & label begin in the middle of the category/lane when using categories, the offset to be adjusted is not known due to a variable chart size and number of categories.

yAxis: {
  labels: {
    align: 'left',
    x: 0,
    y: -2
  }
}

Here is a slightly modified version of the above example that uses categories on the yAxis but does not currently sit at the correct location if you add/remove categories. Wondering if a better idea might be to hide the yAxis labels altogether and handle the swimlanes and labels with plotbands instead.

morganfree morganfree · Accepted Answer · 2017-04-07T15:47:07

Keep the yAxis.labels.y offset but set yAxis.tickmarkPlacement to 'on'. It will affect only a categorized axis but makes the labels to in line with grid lines.

    yAxis: {
        categories: ['Category Named A', 'Category Named B', 'Category Named C', 'Category Named D', 'Category Named E', 'Category Named F', 'Category Named G', 'Category Named H'],
    labels: {
        align: 'left',
        x: 0,
        y: -2,
    },
    tickmarkPlacement: 'on'
},

example with categories: http://jsfiddle.net/kcn9tse8/

example w/o categories: http://jsfiddle.net/kcn9tse8/1/

Highcharts categories adjust yAxis.labels.y to bottom of lane

1 Answers