CODEWITHSUNDEEP
highcharts
Curious86
Curious86

Reputation: 59

Highcharts : How to remove the gap between series and vertical axis?

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'
                }
            }
        }]
    }

});

Highcharts - auto added gaps

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)

Upvotes: 0

Views: 1631

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

check pointPlacement

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

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

Fiddle demo

Upvotes: 6

Related Questions