CODEWITHSUNDEEP
javascriptchartshighchartsgantt-charthighcharts-gantt
SixtyEight
SixtyEight

Reputation: 2490

On Highcharts Gantt, how to display all data labels when start and end from 2 tasks overlap?

I have 2 tasks in the same row. The labels are as below:

  1. first task start
  2. first task end
  3. second task start
  4. second task end

Label 3 is missing as it is below 2.

enter image description here

I'd like to have both showing, and preferably both dots separated in the same day so we can see clearly we have two tasks. One ending, another starting

Please find a working sandbox for this example: https://jsfiddle.net/Fmcg/9071Ltz6/12/

And the options:

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },
  yAxis: {
    categories: ['Magdala']
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "top",
        format: "{point.custom.label}"
      }
    }
  },
  series: [{
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 20)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 25)
    }],
    data: [{
      y: 0,
      x: Date.UTC(2014, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 0,
      x: Date.UTC(2014, 10, 25),
      custom: {
        label: 2
      }
    }]
  }, {
    name: 'Project 1',
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 28)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 29)
    }],
    data: [{
      x: Date.UTC(2014, 10, 25),
      y: 0,
      custom: {
        label: 3
      }
    }, {
      x: Date.UTC(2014, 10, 29),
      y: 0,
      custom: {
        label: 4
      }
    }]
  }]
});

Upvotes: 0

Views: 421

Answers (1)

SixtyEight
SixtyEight

Reputation: 2490

I found out that I can actually add hours, minutes, seconds to Date.UTC. Therefore if task 1 ends at 1pm and task 2 starts at 4pm, it would work.

eg Date.UTC(2014, 10, 25, 13)

Upvotes: 1

Related Questions