'Column chart with categorised Y axis

I'm trying to assign categories to the Y Axis on a column chart. I've tried using categories but this causes a peculiar result with the columns not reaching the X Axis, and the values being incorrect

https://jsfiddle.net/fmgLa5h4/1/

I've tried various other properties to correct this but to no avail.

I've also tried using labels.formatter, which gets a slightly more desirable result but with the labels aligned to the ticks - again I've tried other ways to correct this without success

https://jsfiddle.net/fmgLa5h4/2/

highcharts

Solution 1:^[1]

You can try to mapping the data using data.seriesMapping and set your own dataLabels or categories, take a look at this example:

var categories = ['A', 'B', 'C', 'D', 'E'],
  yAxisLabels = ['10', '20', '30', '40', '50'];

Highcharts.chart('container', {

  data: {
    csv: document.getElementById('data').innerHTML,
    seriesMapping: [{
      // x: 0, // X values are pulled from column 0 by default
      // y: 1, // Y values are pulled from column 1 by default
      label: 2 // Labels are pulled from column 2 and picked up in the dataLabels.format below
    }]
  },
  chart: {
    type: 'column'
  },
  title: {
    text: 'Daily runs'
  },
  xAxis: {
    minTickInterval: 24 * 36e5
  },
  yAxis: {
    labels: {
      formatter: function() {
        return yAxisLabels[this.value] + ', ' + this.value || '';
      },
    },

    tickInterval: 1,
    max: categories.length - 1,
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.label}'
      },
    }
  }

});

For formatting data tables, yAxis.labels.formatter is a good option. It is possible that your data will need to be formatted before you map it.

Sample concept:

data = data.replace(/\r\n/g, '\n') // Unix
    .replace(/\r/g, '\n') // Mac
    .split('\n');
data.forEach(function(row, i){
    if (i) {
        row = row.split(',');
        data[i] = row.concat([
            categories.indexOf(row[1]),
            categories.indexOf(row[3])
        ]).join(',');
    }
});
data = data.join('\n');

Live demo: https://jsfiddle.net/BlackLabel/g5svkrac/

API References:

https://api.highcharts.com/highcharts/yAxis.labels.formatter

https://api.highcharts.com/highcharts/data.seriesMapping

You meant to positioning the label, you can use yAxis.labels.y to position offset of all labels relative to the tick positions on the axis.

https://jsfiddle.net/BlackLabel/g5svkrac/1/