如何使用两个yAxis删除高图表图中的间隙

Question

I have been trying to get rid of the gap on the left and nothing works. This issues only happens when I add a reverse yAxis on the right. Below is the code I am using:

$(function () {
    var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    $('#container').highcharts({
        chart: {
            type: 'areaspline',
            zoomType: 'xy',
        },
        title: {
            text: 'Stats',
        },
        subtitle: {
            text: 'YTD 2013 - 2014',
        },
        xAxis: {
            labels: {
                enabled: true,
                formatter: function () {
                    return categories[this.value];
                }
            },
            tickInterval: 1,
            minPadding: 0,
            maxPadding: 0,
            startOnTick: true,
            endOnTick: true,
        },
        yAxis: [{ //--- Primary yAxis
            min: 0,
            minPadding: 0,
            maxPadding: 0,
            startOnTick: true,
            endOnTick: true,
            title: {
                text: 'Mds',
                style: {
                    color: '#8dc63f',
                }
            },
            labels: {
                style: {
                    color: '#8dc63f',
                    fontWeight: 'bold'
                }
            }
        }, { //--- Secondary yAxis


            labels: {
                formatter: function () {
                    var mil = '$';
                    return mil + Highcharts.numberFormat(this.value, 0);
                },
                style: {
                    color: '#3fb4ed',
                    fontWeight: 'bold'
                }
            },
            title: {
                text: 'Revenue',
                style: {
                    color: '#3fb4ed',
                }

            },
            opposite: true
        }],
        series: [{
            type: 'areaspline',
            color: '#005a84',
            fillOpacity: 0.2,
            yAxis: 0,
            zIndex: 3,
            name: 'Goals',
            data: [5, 5, 5, 5, 6, 8, 8, 8, 10, 10, 10, 10],
        }, {
            type: 'areaspline',
            color: '#8dc63f',
            fillOpacity: 0.2,
            yAxis: 0,
            zIndex: 4,
            name: 'This Year',
            data: [21, 14, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        }, {
            type: 'areaspline',
            color: '#d9531e',
            fillOpacity: 0.2,
            yAxis: 0,
            zIndex: 3,
            visible: false,
            name: 'Last Year',
            data: [20, 2, 2, 7, 8, 5, 7, 3, 2, 2, 5, 5],
        }, {
            type: 'column',
            color: '#3fb4ed',
            fillOpacity: 0.2,
            yAxis: 1,
            zIndex: 1,
            visible: false,
            name: 'Revenue',
            data: [1, 1, 1, 1, 1, 1, 1, 1, 3, 4, 4, 2]
        }]

    });
});

I have tried every possible solutions out there. Went through API docs and searched every forum. Any help would be much appriciated.

Answer 1

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.

Answer 2

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.

Answer 3

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.