How do I remove spacing/padding between series in a Highcharts X-Range chart?

Question

I am trying to remove the extra padding/space added between the series in a Highcharts X-Range chart. Reason being that I need the datapoints to be on the correct Y-axis value but be different series.

Running with just one series seems to show this correctly. However adding a second series seems to shift everything.

Documentation suggests that "pointPlacement: 'on'" should solve it, but it doesn't.

Example with two series (incorrect placement on y-axis): https://jsfiddle.net/63hqgm21/

Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        pointPlacement: 'on'
    },
    title: {
        text: 'Highcharts X-range'
    },
    plotOptions: {
      series: {
        pointPlacement: 'on'
      }
    },
    xAxis: {
        type: 'datetime',
        min: Date.UTC(2014, 10, 21, 0, 0),
        max: Date.UTC(2014, 10, 21, 24, 0),
        gridLineWidth: 1,
        labels: {
            format: '{value:%H}',
            tickInterval: 3600 * 1000
        }
    },
    yAxis: {
          gridLineWidth: 1,
        min: 0,
        title: {
            enabled:false
        }
    },
    series: [{
        name: 'Project 1',
        className: "series_0",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 1
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 2
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    },
    {
        name: 'Project 2',
        className: "series_1",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 3
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 4
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    }
    ]
});

Example with one serie (correct placement on y-axis): https://jsfiddle.net/63hqgm21/1/

Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        pointPlacement: 'on'
    },
    title: {
        text: 'Highcharts X-range'
    },
    plotOptions: {
      series: {
        pointPlacement: 'on'
      }
    },
    xAxis: {
        type: 'datetime',
        min: Date.UTC(2014, 10, 21, 0, 0),
        max: Date.UTC(2014, 10, 21, 24, 0),
        gridLineWidth: 1,
        labels: {
            format: '{value:%H}',
            tickInterval: 3600 * 1000
        }
    },
    yAxis: {
          gridLineWidth: 1,
        min: 0,
        title: {
            enabled:false
        }
    },
    series: [{
        name: 'Project 1',
        className: "series_0",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 1
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 2
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    }
    ]
});

Answer 1

You need to disable grouping:

grouping: boolean

Whether to group non-stacked columns or to let them render independent of each other. Non-grouped columns will be laid out individually and overlap each other. Defaults to true.

  plotOptions: {
    series: {
      grouping: false
    }
  }

---

Live demo: https://jsfiddle.net/BlackLabel/41jbzqg7/

API Reference: https://api.highcharts.com/highcharts/plotOptions.xrange.grouping