Highcharts Gantt Demo

Highcharts Gantt example chart

by YameenYasin

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: {
    adaptToUpdatedData: false,
    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: [{
    data: [
    {
    "start": 1516013760000,
    name:"node1",
    "end": 1516029780000,
    "color": "#e4d354",
    "y": 0
  }, {
    "start": 1515992340000,
    "end": 1516008660000,
    name:"node1",
    "color": "grey",
    "y": 0
  }
    ]
  }]
});

/* SIMULATING OF DYNAMIC DATA */
setInterval(() => {
  chart.get("ganttSerie").setData([{
    "start": 1516013760000,
    "end": 1516029780000,
    name:"node3",
    "color": "#e4d354",
    "y": 0
  }], true);
}, 4000);