Subtasks

author(s): Lars Cabrera

by maritavindedal

HTML

<script src="https://code.highcharts.com/gantt/9.2.2/highcharts-gantt.js"></script>

<div id="container"></div>

CSS

#container {
    max-width: 800px;
    margin: 1em auto;
}

JavaScript

var today = new Date(),
    day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);


// roadmap label overflow check
const labelOverflow = function overflow(point) {
  let label = point.dataLabel;

  if (label) {
    // Reset string to be full width before positioning:
    if (label.shortened) {
      label
        .attr({
        width: 'auto'
      })
        .css({
        width: 'auto',
        textOverflow: 'clip'
      });

      label.shortened = false;
    }

    var labelWidth = label.getBBox().width,
        barWidth = point.shapeArgs.width,
        barX = point.shapeArgs.x,
        css = {
          textOverflow: 'ellipsis',
          width: barWidth - 10
        };

    // Fit label in the bar shape
    if (labelWidth > barWidth) {
      label.shortened = true;
    }

    if (label.shortened) {
      // Apply new logic
      label.css(css).attr({ x: barX });
    } else {
      // Restore default alignment
      point.series.alignDataLabel(
        point,
        label,
        Highcharts.merge(
          point.options && point.options.dataLabels || {},
          point.series.options.dataLabels
        )
      );
    }
  }
}

// THE CHART
Highcharts.ganttChart('container', {
chart: {
  type: 'gantt',
  events: {
    render: function () {
      this.series.forEach(function (series) {
        series.points.forEach(labelOverflow);
      });
    }
  }
},
plotOptions: {
	series: {
	dataLabels: {
			enabled: true,
			format: '{point.name}'
		},
	}
},
    title: {
        text: 'Highcharts Gantt With Subtasks'
    },
    xAxis: {
        min: today.getTime() - (2 * day),
        max: today.getTime() + (32 * day)
    },
    series: [{
		
        name: 'Project 1',
        data: [{
            name: 'Planning',
            id: 'planning',
            start: today.getTime(),
            end: today.getTime() + (20 * day)
        }, {
            name:...