lundi 19 août 2019

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.




Aucun commentaire:

Enregistrer un commentaire