Highcharts : How to remove the gap between series

问题:

It seems like Highcharts is adding some spacing between the 1. series line start/series line end and the 2. vertical axis.

Please see the jsfiddle link and below screenshot for more details.

http://jsfiddle.net/8kbf2e1x/

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

        xAxis: {
            categories: ['D1', 'D2', 'D3', 'D4']
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        verticalAlign: 'bottom'
    },

    plotOptions: {
        series: {
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

How do I get rid of this spaces? I want my series lines to expand from ened to end within the plot area with no gaps. Is it achievable with smaller number of data points? (e.g. in my case every series has only 4 data points)

回答1:

check pointPlacement

when pointPlacement is "on", the point will not create any padding of the X axis.

 plotOptions: {
  series: {
    pointPlacement: 'on'
  }
},

Fiddle demo