CODEWITHSUNDEEP
javascriptreactjshighchartsgantt-charthighcharts-gantt
SixtyEight
SixtyEight

Reputation: 2490

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

I've got a Gantt chart:

enter image description here

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

Upvotes: 1

Views: 315

Answers (1)

Sebastian Hajdus
Sebastian Hajdus

Reputation: 1560

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

Upvotes: 1

Related Questions