A Gantt chart component for React, Angular and Vue

Most Gantt chart components are a framework wrapper the vendor maintains, which means you wait for their React support, their Angular support, their Vue support. GanttKit ships all three as first-party packages over one headless engine, and none of them is a private fork of the chart: the engine computes the same scene, the same feature plugins install, and the renderer stays your choice.

One engine, three bindings

Install one of them next to @ganttkit/core, plus whichever feature plugins you want. The base renderer defaults to @ganttkit/html, so a chart is one component and one stylesheet away.

React

import { GanttChart } from '@ganttkit/react'
import { createColumns } from '@ganttkit/plugin-columns'
import { progressPlugin } from '@ganttkit/plugin-progress'
import '@ganttkit/react/styles.css'

// Declared once, outside the component: plugins are read when the engine is built.
const plugins = [
  createColumns({ columns: [{ key: 'name', label: 'Task' }] }).plugin,
  progressPlugin(),
]

export function Schedule({ rows }) {
  return (
    <GanttChart
      rows={rows}
      plugins={plugins}
      viewMode="Week"
      theme="dark"
      style={{ height: '70vh' }}
    />
  )
}

There is no mount effect, no ref to a host element and no cleanup to remember. A new rows array is pushed into the running engine rather than remounting the chart, so the component can re-render as often as React likes.

Angular

import { Component } from '@angular/core'
import { GanttChartComponent } from '@ganttkit/angular'
import { createColumns } from '@ganttkit/plugin-columns'
import type { Row } from '@ganttkit/core'

@Component({
  selector: 'app-schedule',
  standalone: true,
  imports: [GanttChartComponent],
  template: `
    <gantt-chart
      [rows]="rows"
      [plugins]="plugins"
      viewMode="Week"
      theme="dark"
      style="height: 70vh"
    ></gantt-chart>
  `,
})
export class ScheduleComponent {
  rows: Row[] = []
  plugins = [createColumns({ columns: [{ key: 'name', label: 'Task' }] }).plugin]
}

The package is published in the Angular Package Format and the component is standalone, so it goes in imports with no module to declare. Add the stylesheet to your global styles, either as @import '@ganttkit/angular/styles.css' in styles.css or as an entry in the styles array in angular.json.

Vue 3

<script setup>
import { GanttChart } from '@ganttkit/vue'
import { createColumns } from '@ganttkit/plugin-columns'
import { progressPlugin } from '@ganttkit/plugin-progress'
import '@ganttkit/vue/styles.css'

const props = defineProps({ rows: Array })

const plugins = [
  createColumns({ columns: [{ key: 'name', label: 'Task' }] }).plugin,
  progressPlugin(),
]
</script>

<template>
  <GanttChart :rows="props.rows" :plugins="plugins" view-mode="Week" theme="dark" style="height: 70vh" />
</template>

Note that plugins is a plain array, not a ref. The engine manages its own updates, so there is nothing to gain from making the plugin list reactive and nothing to lose by leaving it out.

Which props update, which rebuild

Every binding follows the same contract, so the mental model transfers between them. The difference matters for performance: a pushed prop reuses the engine, a rebuild throws it away and builds a new one.

Below the component

@ganttkit/react and @ganttkit/vue also export useGantt, a hook in React and a composable in Vue, which is the lifetime management the component is built on. Reach for it when the component's props are not enough and you need the engine itself: updateTask for a single edit instead of a whole new rows array, an events subscription for task:click or task:dragend, or a plugin command such as tree.expandAll. The API reference lists the full engine surface, and every one of those methods is the same method a vanilla caller uses.

Choosing the renderer

The three base renderers consume an identical scene, so they are drop-in swaps for one another. A vanilla caller picks one by importing it. A binding takes it as an option and defaults to htmlRenderer:

import { GanttChart } from '@ganttkit/react'
import { canvasRenderer } from '@ganttkit/canvas'
import '@ganttkit/canvas/styles.css'

// <GanttChart renderer={canvasRenderer} rows={rows} />

@ganttkit/svg and @ganttkit/canvas are optional peers of the bindings: install the one you use and import its stylesheet from that package. A binding's own styles.css re-exports the HTML sheet only, because that is the renderer it depends on. Any factory matching RendererFactory works, so a renderer you wrote yourself drops in the same way.

Svelte, Solid, or no framework at all

There is no binding for these yet, and you do not need one. The engine is headless and imperative, the renderer is a plugin, and a wrapper is about twenty lines. Three rules cover it:

1. Create once, on mount. The engine is long-lived. Build it when the host element exists, not on every render.
2. Keep it out of reactive state. Store the engine in a ref or a plain variable. Putting an imperative object into component state causes re-render loops and stale closures.
3. Destroy on unmount. engine.destroy() removes listeners and disposes plugins in reverse install order.

<script>
  import { onMount, onDestroy } from 'svelte'
  import { GanttEngine } from '@ganttkit/core'
  import { svgRenderer } from '@ganttkit/svg'
  import '@ganttkit/svg/styles.css'

  export let rows = []
  export let viewMode = 'Week'

  let host
  let engine

  onMount(() => {
    engine = new GanttEngine({ rows, viewMode })
    engine.use(svgRenderer({ target: host, theme: 'dark' }))
  })

  $: engine?.setRows(rows)
  $: engine?.setViewMode(viewMode)

  onDestroy(() => engine?.destroy())
</script>

<div bind:this={host} style="height: 480px"></div>

Those reactive statements are doing by hand what a binding does for you, and this is the table they follow. Prefer the narrow call over replacing the dataset wherever you can:

A framework-free custom element

If the chart has to drop into pages you do not control, wrap it as a custom element once and use it anywhere, including inside any framework.

class GanttChartElement extends HTMLElement {
  connectedCallback() {
    this.engine = new GanttEngine({ rows: this.rows ?? [], viewMode: 'Week' })
    this.engine.use(svgRenderer({ target: this, theme: 'dark' }))
  }
  disconnectedCallback() { this.engine?.destroy() }
  set data(rows) { this.rows = rows; this.engine?.setRows(rows) }
}

customElements.define('gantt-chart', GanttChartElement)

Server-side rendering

The core has no DOM access and no browser globals, so it is safe to import and even compute with on the server. Renderers mount on the client, and each binding creates its chart in the framework's own client-only mount path. A hand-rolled wrapper has to keep that discipline itself: useEffect in React, onMounted in Vue, onMount in Svelte, ngAfterViewInit in Angular.

Keep reading

Frequently asked questions