score:2

Accepted answer

You can set for xAxis:

    xAxis: {
        labels: {
            enabled: true,
            formatter: function () {
                return categories[this.value];
            }
        },
        tickInterval: 1,
        minPadding: 0,
        maxPadding: 0,
        min: 0.5,                     // remove padding
        max: categories.length - 1.5, // remove padding
        startOnTick: false,           // allow to start not from tick
        endOnTick: false              // allow to end not at tick
    },

Example: http://jsfiddle.net/p2EYM/24/ - turn on Revenue - you will see that first and last column will be cut off.

score:0

The reason it is doing this is because, even though the series is hidden on load, you have a column series that needs the width to display. If you just show series "Revenue" you can see it is using that empty space that was there before. You could also play with tickPixelInterval - but for that you need to not use a categorized xAxis.

See this example. I also set showEmpty to false for both yAxis elements.

score:0

If you change the last of series from 

    type: 'column',

to

    type: 'areaspline',

there will be no gaps on left and right side. Do you need type column?

Solution for your problem is answered here Highcharts Remove Space across the x-Axis by user Dusty. You have to setup for x-axis:

    min: 0.5,
    max: 10.5,

Note: if you turn your column type series to visible: true half of the first and the last column will be cut-off.


Related Articles