Highcharts Grid Gantt-style example

by stitot

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid.css" />

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

  <script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>

CSS

body {
  background: #fff;
  padding: 50px;
}

#container {
  max-width: 700px;
}

.custom {
  --hcg-background: #fff;
  --hcg-row-border-width: 5px;
  --hcg-row-border-color: #fff;
  --hcg-font-size: 13px;
}

JavaScript

const rows = [
  { task: 'Planning',     start: 1,  end: 5,  color: '#7cb5ec' },
  { task: 'Design',       start: 4,  end: 11, color: '#90ed7d' },
  { task: 'Development',  start: 9,  end: 22, color: '#f7a35c' },
  { task: 'Testing',      start: 20, end: 27, color: '#8085e9' },
  { task: 'Release',      start: 28, end: 31, color: '#f15c80' }
];

const dataColumns = {
  Task: rows.map(row => row.task)
};

for (let day = 1; day <= 31; day++) {
  const columnId = `day-${day}`;

  dataColumns[columnId] = rows.map(row =>
    day >= row.start && day <= row.end ? row.color : ''
  );
}

const columns = [
  {
    id: 'Task',
    width: 'auto',
  },
  ...Array.from({ length: 31 }, (_, i) => {
    const day = i + 1;
    const columnId = `day-${day}`;

    return {
      id: columnId,
      header: {
        format: String(day)
      },
      cells: {
        formatter() {
          return '';
        },
        style(cell) {
          const color = cell.value;
          return {
            backgroundColor: color || '#ffffff'
          };
        }
      }
    };
  })
];

Grid.grid('container', {
  data: {
    columns: dataColumns
  },
  rendering: {
    theme: 'custom'
  },
  columnDefaults: {
    width: 20,
    sorting: {
      enabled: false
    },
  },
  columns
});