Gantt Chart with Progress Indicators

by oysteinmoseng

HTML

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

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

JavaScript

const today = new Date().getTime();

const columns= [{
    title: {
      text: "Plan",
    },
    labels: {
      format: "{point.plan}",
      style: {
        width: 100,
        color: "green",
        fontSize: "10",
      },
    },
    visible: true,
    width: 1000,
  },
  {
    title: {
      text: "Name",
    },
    labels: {
      format: "{point.name}",
      style: {
        width: 300,
      },
    },
    visible: true,
    width: 300,
  },
  {
    title: {
      text: "Start",
    },
    labels: {
      format: "{point.start:%Y-%m-%d}",
      style: {
        width: 125,
      },
    },
    visible: true,
    width: 125,
  },
  {
    title: {
      text: "Due",
    },
    labels: {
      format: "{point.end:%Y-%m-%d}",
      style: {
        width: 125,
      },
    },
    visible: true,
    width: 125,
  },
];

const chartOptions =  {
  chart: {
    type: "ganttChart",
    zooming: {
      key: "alt",
      type: "x"
    },
    panning: {
      enabled: true,
      type: "x"
    },
    panKey: "shift",
  },
  series: [{
    name: "Project 1",
    type: "gantt",
    data: [{
        start: new Date(2023, 9, 1).getTime(),
        end: new Date(2023, 12, 4).getTime(),
        name: "Dream big",
        plan: "My best plan with some extra description",
        y: 0,
      },
    ],
  }, ],
  yAxis: {
    type: "category",
    grid: {
      enabled: true,
      borderWidth: 1,
      columns,
    },
  },

  xAxis: {
    currentDateIndicator: true,
    dateTimeLabelFormats: {
      year: "%Y",
      month: "%b",
      week: "%m/%e",
    },
  },
  plotOptions: {
    series: {
      animation: false,
      dragDrop: {
        draggableX: true,
        draggableY: true,
        dragMinY: 0,
        dragMaxY: 2,
      },
      dataLabels: {
        enabled: true,
        format: "{point.name}",
        style: {
          cursor: "default",
          pointerEvents: "none",
        },
      },
      allowPointSelect: true,
    },
  },
  accessibility: {
   ...