Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

.highcharts-gantt-series .highcharts-point.odd-row {
  background-color: green;
}

.highcharts-gantt-series .highcharts-point.even-row {
  background-color: #ffffff;
}

JavaScript

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart',
  },
  chart: {
    plotBorderWidth: 1,
    plotBorderColor: "red",
    events: {
      load: function() {
        const chart = this,
          yAxis = chart.yAxis[0],
          categories = yAxis.categories,
          colors = yAxis.userOptions.customRowColors;

        chart.customRows = chart.customRows = Array.from(Array(categories.length));

        categories.forEach(function(category, i) {
          if (colors[i]) {
            chart.customRows[i] = chart.renderer.rect().attr({
              fill: colors[i]
            }).add();
          }
        })
      },
      render: function() {
        const chart = this,
          yAxis = chart.yAxis[0],
          customRows = chart.customRows,
          x = chart.plotLeft,
          y = chart.plotTop,
          height = yAxis.userOptions.staticScale,
          width = chart.plotWidth;

        chart.customRows.forEach(function(customRow, i) {
          if (customRow) {
            customRow.attr({
              x,
              width,
              height,
              y: y + height * i,
            })
          }
        })
      }
    }
  },
  yAxis: {
    gridLineWidth: 1,
    gridLineColor: 'black',
    uniqueNames: true,
    customRowColors: ['', '#DCDCDC', 'grey']
  },
  xAxis: {
    gridLineWidth: 1,
    gridLineColor: 'black',
    tickWidth: "20px",
    tickLength: "10",
    tickmarkPlacement: "between",
    opposite: true,
    tickInterval: 1000 * 60 * 60 * 24 * 30, // 1 month
    labels: {
      format: '{value:%b}' // day of the week
    },
    currentDateIndicator: {
      width: 1,
      color: 'black',
      label: {
        format: '%m-%m-%d',
        align: 'right'
      },
      zIndex: 1
    },
  },

  navigator: {
    enabled: true,
    liveRedraw: true,
    series: {
      type: 'gantt',
      pointPlacement: 0.5,
      pointPadding: 0.25,
      accessibility: {
        enabled: false
      }
    },
    yAxis: {
     ...