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

Sebastian Hajdus · Accepted Answer · 2022-09-21T12:25:46.607

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
    }
  },

Thanks but that's not really a gap. I'd rather have a complete separation between series, instead of adding empty ones. — SixtyEight, Sep 21 '22 at 08:22
Unfortunately, we do not have a mechanism in Highcharts Gantt for adding gap spacing between rows, so I propose a workaround. — Sebastian Hajdus, Sep 21 '22 at 10:22
Thanks a lot Sebastian. any hints on how to remove the vertical yAxis grid lines just on those empty series? This way it would simulate perfectly. — SixtyEight, Sep 21 '22 at 11:08

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

1 Answers1