How do I add a gap between series in Highcharts Gantt?

Question

I've got a Gantt chart:

And I'd like to add an horizontal gap between all series (1 and 2 in this case).

I've tried to use the groupPadding but with no success:

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },
  yAxis: {
    categories: ['1', '2']
  },
  xAxis: [{

    tickInterval: 1000 * 60 * 60 * 24,
    tickmarkPlacement: 'on',
    gridLineWidth: 1

  }, {

    tickInterval: 1000 * 60 * 60 * 24 * 30,
    tickmarkPlacement: 'on',
    gridLineWidth: 1

  }],

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "top",
        format: "{point.custom.label}"
      }
    }
  },
  series: [{
    groupPadding: 1,
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 0,
      x: Date.UTC(2022, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 0,
      x: Date.UTC(2022, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }, {
    groupPadding: 1,
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 1,
      x: Date.UTC(2022, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 1,
      x: Date.UTC(2022, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }]
});

Fiddle here

Answer 1

You can try adding an empty category for an empty series and you will get a horizontal space between series.

Highcharts.ganttChart('container', {
  yAxis: {
    categories: ['1', '', '2']
  },
  series: [{
    groupPadding: 1,
    type: 'line',
    data: [{
      y: 0,
      x: Date.UTC(2022, 10, 18),
    }, {
      y: 0,
      x: Date.UTC(2022, 10, 25, 12),
    }]
  }, {}, {
    type: 'line',
    data: [{
      y: 2,
      x: Date.UTC(2022, 10, 18),
    }, {
      y: 2,
      x: Date.UTC(2022, 10, 25, 12),
    }]
  }]
});

Demo: https://jsfiddle.net/BlackLabel/r6ugs493/

EDIT ----

A possible way to hide the vertical lines would be to hide them using the yAxis.tickColor, yAxis.lineColor options.

And the table border can be rendered by SVG Renderer to make the table complete by omitting the gaps between the series.

  chart: {
    events: {
      render: function() {
        var chart = this,
          series = chart.series,
          plotLeft = chart.plotLeft,
          plotTop = chart.plotTop,
          plotWidth = chart.plotWidth;


        if (chart.myBackground) {
          chart.myBackground.destroy();
        }

        chart.myBackground = chart.renderer.rect(plotLeft - 40, plotTop, 40, 50, 0)
          .attr({
            'stroke-width': 1,
            stroke: '#ccd6eb',
            opacity: 0.5,
            zIndex: 5
          })
          .add();
      }
    }
  },
  yAxis: {
    categories: ['1', '', '2'],
    tickColor: 'transparent',
    lineColor: 'transparent',
    labels: {
      //enabled: false
    }
  },