How to remove the padding on the both ends of the

Question

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.

Answer 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/

Answer 2

Use following in your chart config:

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