How can I get the yAxis of Highcharts to display categories instead of number values?

Question

I have this fiddle JSfiddle

Here is the reproduced code:

$(function () {
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    xAxis: {
        categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP']
    },
    yAxis: {
        categories: ['low','medium','high'],
        title: {
            text: 'expertise',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        data: ['low','high','low','medium','medium']
    }]
});
});

If you look at the fiddle the yAxis does not render and has a value of for every x category. I've been looking at the highcharts api, but I can't seem to get this right. The code makes sense to me but I'm obviously doing something wrong. Can someone point out why the YAxis is not displaying correctly?

Answer 1

As mentioned in my comment, you need to supply the numeric value of the category, not the category name.

In the case of categories, the numeric value is the array index.

Also, in your case, the way you are trying to plot the values, I would add an empty category at the beginning, otherwise your first category of low gets plotted as 0 , which doesn't seem right.

So,

categories: ['low','medium','high']

Becomes

categories: ['','low','medium','high'],

And

data: ['low','high','low','medium','medium']

Becomes

data: [1,3,1,2,2]

Updated fiddle:

• http://jsfiddle.net/jlbriggs/k64boexd/3/

Answer 2

Check this fiddle: http://jsfiddle.net/navjot227/k64boexd/2/

Trick is to utilize the formatter function. You can use a similar formatter function on y-axis labels too if that's desired. Though it seems like you need it for data labels for this problem.

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    xAxis: {
      categories: ['Heroku', 'Ruby', 'Lisp', 'Javascript', 'Python', 'PHP']
    },
    yAxis: {

      title: {
        text: 'expertise',
        align: 'high'
      },
      labels: {
        overflow: 'justify',

      }
    },
    tooltip: {
      valueSuffix: ' millions'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true,
          formatter: function() {
            if (this.y == 0) {

              return 'low'
            } else if (this.y == 1) {
              return 'medium'
            } else {
              console.log(this.y);
              return 'high'
            }
          }

        }
      }
    },
    series: [{
      data: [0, 2, 0, 1, 1]
    }]
  });
});

Answer 3

In my opinion, it is kinda unlikely for a line graph to have a y-axis category, since it speaks more of amount or value. In your case, "low, medium, and high" speaks of ranges, with which a certain value can be assigned to any of it.

Thus, Highcharts accepts series data in numeric form. But you can work around it by setting ['low', 'medium', 'high'] in the category attribute of yAxis , then setting series data as an array of number corresponding to the index of the category, ie [0,1,1,2,...] and tweaking the tooltip to display the category instead of the y value using formatter attribute.

Here is the code:

$(function() {
  yCategories = ['low', 'medium', 'high'];
  $('#container').highcharts({
    title: {
      text: 'Chart with category axes'
    },

    xAxis: {
      categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP']
    },

    yAxis: {
      categories: yCategories
    },

    tooltip: {
      formatter: function() {
        return this.point.category + ': ' + yCategories[this.y];
      }
    },

    series: [{
      data: [0, 1, 2, 2, 1]
    }]
  });
});

Here is a working example : JSFiddle