CODEWITHSUNDEEP
javascriptwebhighcharts
Patrick Packham
Patrick Packham

Reputation: 75

Applying 'categories' to Y-Axis causes a gap between column start and X Axis in Highcharts?

I am setting up a simple column chart using Highcharts. After applying categories to my Y-Axis it causes my columns to raise off the x-axis.

I initially was using a chart someone else started with, however couldn't fix it and even after altering a few different fields on my chart. Notably, min and max, however I also tried a few others I found in the docs regarding spacing etc.

So I took a chart from the Highcharts documentation and explictly edited it to my needs. Here is the starting chart I began with. I edited each field to slowly turn it into the graph I need.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Bar Title'
    },
    xAxis: {
        categories: [
            'Category 1',
            'Category 2',
            'Category 3',
            'Category 4',
        ]
    },
    yAxis: {
        title: '',
        categories: ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'],
        min: 0,
        max: 5,
        tickmarkPlacement: 'on'
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Score',
        data: [1, 2, 3, 4]

    }, {
        name: 'Average Score',
        data: [5, 4, 4, 4]

    }]
});

This is as close as I can get. However, as noted by this image, there is a gap between my column and my x-axis.

'As close as I can get it'

If I remove the below line:

categories: ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'],

It gets a lot closer!

'Almost there'

I'm just looking for a way to keep my Y-axis labels and have no gap. Any insight is appreciated.

Upvotes: 1

Views: 663

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

You can't have categories on the xAxis and yAxis at the same time when you pass data with values. However, you can achieve what you expect using yAxsi.labels.formatter callback and mapping values to categories. Check demo and code posted below:

var categories = ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'];

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Bar Title'
  },
  xAxis: {
    categories: [
      'Category 1',
      'Category 2',
      'Category 3',
      'Category 4',
    ]
  },
  yAxis: {
    title: '',
    min: 0,
    max: 5,
    labels: {
        formatter: function() {
        return categories[this.value];
      }
    }
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Score',
    data: [1, 2, 3, 4]
  }, {
    name: 'Average Score',
    data: [5, 4, 4, 4]
  }]
});

Demo:

API reference:

Upvotes: 1

Related Questions