Progress indicator

author(s): Lars Cabrera

by b_g_v

HTML

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

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

JavaScript

Highcharts.ganttChart('container', {
	yAxis: {
		staticScale: 120
	},
  plotOptions: {
    series: {
			pointWidth: 30,
      dataLabels: {
        enabled: true,
				useHTML: true,
        align: 'left',
				color: 'white',
				formatter: function() {
					const point = this.point,
						text = point.text,
						textWidth = point.dataLabel ? point.dataLabel.bBox.width : 0,
						pointWidth = point.shapeArgs.width - 10;

					if (
						point.dataLabel !== undefined &&
						pointWidth < textWidth
					) {
						return `
							<span style="
								word-break: break-all;
								width: ${pointWidth}px;
								white-space: normal;
								display: block;
								font-size: 10px;
								line-height: 12px;
							">
								${text}
							</span>
						`;
					} else {
						return text;
					}
				}
      },
    }
  },
  xAxis: {
    min: Date.UTC(2014, 10, 17),
    max: Date.UTC(2014, 10, 30)
  },
  series: [{
    name: 'Project 1',
    data: [{
      name: 'Start prototype',
      text: 'XXXXXXXX - aaaaaaaaaaaaa',
      start: Date.UTC(2014, 10, 18),
      end: Date.UTC(2014, 10, 25)
    }, {
      name: 'Test prototype',
      text: 'XXXXXXXX - aaaaaaaaaaaaa',
      start: Date.UTC(2014, 10, 27),
      end: Date.UTC(2014, 10, 29)
    }, {
      name: 'Develop',
      text: 'XXXXXXXX - aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
      start: Date.UTC(2014, 10, 20),
      end: Date.UTC(2014, 10, 25)
    }]
  }]
});