CODEWITHSUNDEEP
javascripthighcharts
el_tuzcatore
el_tuzcatore

Reputation: 25

How do I display all the data in categories on y-axis in HighCharts?

I would like to display on the y-axis of the data through the categories property. I pass an array as I saw in some examples

initLapChart() {
hcharts.chart(this.div.nativeElement, {
  chart: {
     ...
  },
  yAxis: {
    categories: ["0:20", "0:30", "0:40", "1:00", "1:15"],
    reversed: true,
    tickPixelInterval: 50,
    gridLineWidth: 1,
    ... 
  },
  ...
}

but it only shows me the first two values, why?

Upvotes: 0

Views: 1305

Answers (2)

jlbriggs
jlbriggs

Reputation: 17800

If you want to show all of your categories, whether you have data for them or not, you just need to set your axis min and max values:

    yAxis: {
        min: 0,
        max: 4,
        reversed: true,
        tickInterval: 1,
        categories: ['0:20', '0:30', '0:40', '1:00', '1:15'],
        labels: {
            step: 1
        }
    },

Updated fiddle:

Or you can do it programmatically if you define your categories up front:

var categories = ['0:20', '0:30', '0:40', '1:00', '1:15'], 
    yMax = categories.length -1;

Fiddle:

Upvotes: 1

pawel_d
pawel_d

Reputation: 3070

The elements in categories array are indexed from 0 to categories.length - 1, so the first element from the array represents value 0 on yAxis, the second, value 1, etc. If you want to display them all, you need to set tickInterval and labels.step properties with value 1.

API Reference:
http://api.highcharts.com/highcharts/yAxis.tickInterval
http://api.highcharts.com/highcharts/yAxis.labels.step

Example:
http://jsfiddle.net/6qp0v887/

Upvotes: 0

Related Questions