Highcharts Gantt Demo

Highcharts Gantt example chart

by jpeter06

HTML

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

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

JavaScript

const chart = Highcharts.ganttChart('container', {
  chart: {
    spacing: [0,0,0,0],
    zoomType: undefined,
    panning: true
  },
  navigator: {
    enabled: true,
    margin: 0,
    liveRedraw: true,
    series: {
      type: "gantt",
      pointPlacement: 0.05,
      pointWidth: 6
    },
    xAxis: {
      visible: false
    },
    yAxis: {
      min: 0,
      max: 4,
      reversed: true
    }
  },
  xAxis: [{
    id: "mainXAxis",
    grid: { enabled: false },
    labels: { align: "center" },
    tickLength: 0,
    opposite: false,
    offset: -8,
    lineWidth: 0,
    dateTimeLabelFormats: {
      millisecond: "%H:%M:%S.%L",
      second: "%H:%M:%S",
      minute: "%H:%M",
      hour: "%H:%M",
      day: "%Y/%m/%d - %H:%M",
      week: "%Y/%m/%d - %H:%M",
      month: "%Y/%m/%d",
      year: "%Y/%m/%d"
    },
    plotLines: [{
      color: "red",
      width: 2,
      label: {
        text: "now",
        verticalAlign: "bottom",
        textAlign: "right",
        y: -10,
        style: {
          color: "red"
        }
      },
      value: undefined,
      zIndex: 100
    }]
  }, {
    visible: false
  }],
  yAxis: {
    type: "categories"
  },
  plotOptions: {
    gantt: {
      pointWidth: 14,
      pointPadding: 0,
      borderWidth: 0,
      borderRadius: 0,
      pointPlacement: 0.05
    }
  },
  tooltip: {
    formatter() {
      return "tooltip";
    },
    followPointer: true,
    borderColor: "#000000"
  },
  series: [{
    id: "ganttSerie"
  }]
});

/* SIMULATING OF DYNAMIC DATA */
setInterval(() => {
	chart.get("ganttSerie").setData([{
  	"start":1516013760000,
    "end":1516029780000,
    "color":(Math.random() > 0.5 ? "red":"blue"),
    "y":0
  },{
  	"start":1515992340000,
    "end":1516008660000,
    "color":"green",
    "y":0
  }], true);
}, 4000);