How to remove the padding on the both ends of the HighChart

问题

I have been trying this for hours and still have no idea.

Here is the config that I am using

 chart: {
            type: 'xrange',
            height: 800,
        },
        title: {
            text: 'Patient Sessions Overview'
        },
        xAxis: {
            title: 'Time of the Day',
            type: 'datetime',
            tickInterval: 3600*1000,
            tickPixelInterval: 200,
            labels: {
                formatter: function () {
                    return Highcharts.dateFormat('%H:%M', this.value);
                },
            },
            min: Date.UTC(2016,1,1),
            max: Date.UTC(2016,1,2),
        },
        yAxis: {
            title: 'Day of the Month',
            type: 'datetime',
            tickInterval: 3600*1000*24,
            //tickPixelInterval: 100,
            min: Date.UTC(2016,1),
            max: Date.UTC(2016,2) - 3600*1000*24
            //min: 0,
            //max: 31
        },
        plotOptions:{
            series: {
                pointPadding: 0,
                groupPadding: 0
            }
        },
        series: [{
            name: 'Sessions',
            //pointStart: Date.UTC(2000,0,1),
            //pointInterval: 3600*1000,
            //pointPadding: 10,
            // groupPadding: 0,
            borderRadius: 5,
            pointWidth: 20,
            data: [{
                    x: Date.UTC(2016, 1, 1, 0),
                    x2: Date.UTC(2016, 1, 1, 9),
                    y: Date.UTC(2016,1,4)
                }, {
                    x: Date.UTC(2016, 1, 1, 12),
                    x2: Date.UTC(2016, 1, 1, 15),
                    y: Date.UTC(2016,1,5)
                }, {
                    x: Date.UTC(2016, 1, 1, 8),
                    x2: Date.UTC(2016, 1, 1, 9),
                    y: Date.UTC(2016,1,14)
                }, {
                    x: Date.UTC(2016, 1, 1, 8),
                    x2: Date.UTC(2016, 1, 1, 9),
                    y: Date.UTC(2016,1,20)
                }, {
                    x: Date.UTC(2016, 1, 1, 8),
                    x2: Date.UTC(2016, 1, 1, 23),
                    y:Date.UTC(2016,1,25) 
            },],
        }]

Here is the jsfiddle link

I need to remove the chart to make full use of the plot area without leaving a huge white space on both ends.

回答1:

It is problem with unsorted data. In fact, you can not sort your data as Highcharts would expect, because some of the points are starting before previous one are ended. However, for such case, series.pointRange = 1 resolves all issues, take a look: http://jsfiddle.net/umndydLL/1/

回答2:

Use following in your chart config:

spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
margin:0,
padding:0

来源：https://stackoverflow.com/questions/35197463/how-to-remove-the-padding-on-the-both-ends-of-the-highchart

标签

Highcharts