Docs Charts Timeline

GanttChart

import { useState } from "react";
import { GanttChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";
 
const ganttTasks = [
  {
    id: "discovery",
    label: "Customer discovery",
    start: "2026-01-12",
    end: "2026-02-20",
    lane: "product",
    color: "var(--accent)",
  },
  {
    id: "research-synth",
    label: "Research synthesis",
    start: "2026-02-16",
    end: "2026-03-13",
    lane: "product",
    color: "var(--accent)",
  },
  {
    id: "design-system",
    label: "Workflow design system",
    start: "2026-02-09",
    end: "2026-04-17",
    lane: "design",
    color: "var(--vs-success)",
    pattern: { kind: "diagonal" as const },
  },
  {
    id: "content-model",
    label: "Content model",
    start: "2026-03-16",
    end: "2026-05-08",
    lane: "design",
    color: "var(--vs-success)",
    pattern: { kind: "dots" as const },
  },
  {
    id: "api-migration",
    label: "API migration",
    start: "2026-03-16",
    end: "2026-07-24",
    lane: "platform",
    color: "var(--vs-warning)",
    pattern: { kind: "dots" as const },
  },
  {
    id: "identity-federation",
    label: "Identity federation",
    start: "2026-04-20",
    end: "2026-06-26",
    lane: "platform",
    color: "var(--vs-warning)",
    pattern: { kind: "diagonal" as const },
  },
  {
    id: "warehouse-cutover",
    label: "Warehouse cutover",
    start: "2026-05-11",
    end: "2026-08-14",
    lane: "data",
    color: "var(--vs-info)",
    pattern: { kind: "crosshatch" as const },
  },
  {
    id: "privacy-review",
    label: "Privacy review",
    start: "2026-06-01",
    end: "2026-07-17",
    lane: "legal",
    color: "var(--vs-error)",
  },
  {
    id: "partner-beta",
    label: "Partner beta",
    start: "2026-07-13",
    end: "2026-10-02",
    lane: "delivery",
    color: "var(--vs-info)",
    pattern: { kind: "crosshatch" as const },
  },
  {
    id: "docs-academy",
    label: "Docs and academy",
    start: "2026-08-17",
    end: "2026-10-30",
    lane: "delivery",
    color: "var(--vs-success)",
  },
  {
    id: "general-availability",
    label: "General availability",
    start: "2026-10-05",
    end: "2026-12-11",
    lane: "release",
    color: "var(--accent)",
  },
  {
    id: "hypercare",
    label: "Hypercare",
    start: "2026-12-01",
    end: "2026-12-23",
    lane: "release",
    color: "var(--vs-warning)",
  },
];
 
export default function GanttChartDemo() {
  const [layout, setLayout] = useState<"linear" | "radial">("linear");
  return (
    <div>
      <VariantToggle
        label="Layout"
        options={[
          { value: "linear" as const, label: "Linear" },
          { value: "radial" as const, label: "Radial" },
        ]}
        value={layout}
        onChange={setLayout}
      />
      <GanttChart
        ariaLabel="Customer data platform delivery programme with twelve workstreams, 2026"
        layout={layout}
        items={ganttTasks}
        dependencies={[
          {
            from: "discovery",
            to: "research-synth",
          },
          {
            from: "discovery",
            to: "design-system",
          },
          {
            from: "research-synth",
            to: "content-model",
          },
          {
            from: "design-system",
            to: "api-migration",
          },
          {
            from: "content-model",
            to: "warehouse-cutover",
          },
          {
            from: "api-migration",
            to: "identity-federation",
          },
          {
            from: "api-migration",
            to: "partner-beta",
          },
          {
            from: "privacy-review",
            to: "partner-beta",
          },
          {
            from: "partner-beta",
            to: "docs-academy",
          },
          {
            from: "partner-beta",
            to: "general-availability",
          },
          {
            from: "general-availability",
            to: "hypercare",
          },
        ]} />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { GanttChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";
 
const layout = ref<"linear" | "radial">("linear");
const layouts = [
  { value: "linear", label: "Linear" },
  { value: "radial", label: "Radial" },
];
 
const ganttTasks = [
  {
    id: "discovery",
    label: "Customer discovery",
    start: "2026-01-12",
    end: "2026-02-20",
    lane: "product",
    color: "var(--accent)",
  },
  {
    id: "research-synth",
    label: "Research synthesis",
    start: "2026-02-16",
    end: "2026-03-13",
    lane: "product",
    color: "var(--accent)",
  },
  {
    id: "design-system",
    label: "Workflow design system",
    start: "2026-02-09",
    end: "2026-04-17",
    lane: "design",
    color: "var(--vs-success)",
    pattern: { kind: "diagonal" as const },
  },
  {
    id: "content-model",
    label: "Content model",
    start: "2026-03-16",
    end: "2026-05-08",
    lane: "design",
    color: "var(--vs-success)",
    pattern: { kind: "dots" as const },
  },
  {
    id: "api-migration",
    label: "API migration",
    start: "2026-03-16",
    end: "2026-07-24",
    lane: "platform",
    color: "var(--vs-warning)",
    pattern: { kind: "dots" as const },
  },
  {
    id: "identity-federation",
    label: "Identity federation",
    start: "2026-04-20",
    end: "2026-06-26",
    lane: "platform",
    color: "var(--vs-warning)",
    pattern: { kind: "diagonal" as const },
  },
  {
    id: "warehouse-cutover",
    label: "Warehouse cutover",
    start: "2026-05-11",
    end: "2026-08-14",
    lane: "data",
    color: "var(--vs-info)",
    pattern: { kind: "crosshatch" as const },
  },
  {
    id: "privacy-review",
    label: "Privacy review",
    start: "2026-06-01",
    end: "2026-07-17",
    lane: "legal",
    color: "var(--vs-error)",
  },
  {
    id: "partner-beta",
    label: "Partner beta",
    start: "2026-07-13",
    end: "2026-10-02",
    lane: "delivery",
    color: "var(--vs-info)",
    pattern: { kind: "crosshatch" as const },
  },
  {
    id: "docs-academy",
    label: "Docs and academy",
    start: "2026-08-17",
    end: "2026-10-30",
    lane: "delivery",
    color: "var(--vs-success)",
  },
  {
    id: "general-availability",
    label: "General availability",
    start: "2026-10-05",
    end: "2026-12-11",
    lane: "release",
    color: "var(--accent)",
  },
  {
    id: "hypercare",
    label: "Hypercare",
    start: "2026-12-01",
    end: "2026-12-23",
    lane: "release",
    color: "var(--vs-warning)",
  },
];
</script>
 
<template>
  <div>
    <VariantToggle v-model="layout" label="Layout" :options="layouts" />
    <GanttChart
      aria-label="Customer data platform delivery programme with twelve workstreams, 2026"
      :layout="layout"
      :items="ganttTasks"
      :dependencies="[
        {
          from: 'discovery',
          to: 'research-synth',
        },
        {
          from: 'discovery',
          to: 'design-system',
        },
        {
          from: 'research-synth',
          to: 'content-model',
        },
        {
          from: 'design-system',
          to: 'api-migration',
        },
        {
          from: 'content-model',
          to: 'warehouse-cutover',
        },
        {
          from: 'api-migration',
          to: 'identity-federation',
        },
        {
          from: 'api-migration',
          to: 'partner-beta',
        },
        {
          from: 'privacy-review',
          to: 'partner-beta',
        },
        {
          from: 'partner-beta',
          to: 'docs-academy',
        },
        {
          from: 'partner-beta',
          to: 'general-availability',
        },
        {
          from: 'general-availability',
          to: 'hypercare',
        },
      ]" />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootGanttChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";
 
@Component({
  selector: "app-gantt-chart-chart-demo",
  standalone: true,
  imports: [GrassrootGanttChart, VariantToggleComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<app-variant-toggle
      label="Layout"
      [options]="layouts"
      [value]="layout()"
      (valueChange)="setLayout($event)"
    /><grassroot-gantt-chart
    [ariaLabel]="'Customer data platform delivery programme with twelve workstreams, 2026'"
    [layout]="layout()"
    [items]="ganttTasks"
    [dependencies]="[
      {
        from: 'discovery',
        to: 'research-synth',
      },
      {
        from: 'discovery',
        to: 'design-system',
      },
      {
        from: 'research-synth',
        to: 'content-model',
      },
      {
        from: 'design-system',
        to: 'api-migration',
      },
      {
        from: 'content-model',
        to: 'warehouse-cutover',
      },
      {
        from: 'api-migration',
        to: 'identity-federation',
      },
      {
        from: 'api-migration',
        to: 'partner-beta',
      },
      {
        from: 'privacy-review',
        to: 'partner-beta',
      },
      {
        from: 'partner-beta',
        to: 'docs-academy',
      },
      {
        from: 'partner-beta',
        to: 'general-availability',
      },
      {
        from: 'general-availability',
        to: 'hypercare',
      },
    ]"
  />`,
})
export class GanttChartDemoComponent {
  readonly layout = signal<"linear" | "radial">("linear");
  readonly layouts = [
    { value: "linear", label: "Linear" },
    { value: "radial", label: "Radial" },
  ] as const;
  readonly ganttTasks = [
    {
      id: "discovery",
      label: "Customer discovery",
      start: "2026-01-12",
      end: "2026-02-20",
      lane: "product",
      color: "var(--accent)",
    },
    {
      id: "research-synth",
      label: "Research synthesis",
      start: "2026-02-16",
      end: "2026-03-13",
      lane: "product",
      color: "var(--accent)",
    },
    {
      id: "design-system",
      label: "Workflow design system",
      start: "2026-02-09",
      end: "2026-04-17",
      lane: "design",
      color: "var(--vs-success)",
      pattern: { kind: "diagonal" as const },
    },
    {
      id: "content-model",
      label: "Content model",
      start: "2026-03-16",
      end: "2026-05-08",
      lane: "design",
      color: "var(--vs-success)",
      pattern: { kind: "dots" as const },
    },
    {
      id: "api-migration",
      label: "API migration",
      start: "2026-03-16",
      end: "2026-07-24",
      lane: "platform",
      color: "var(--vs-warning)",
      pattern: { kind: "dots" as const },
    },
    {
      id: "identity-federation",
      label: "Identity federation",
      start: "2026-04-20",
      end: "2026-06-26",
      lane: "platform",
      color: "var(--vs-warning)",
      pattern: { kind: "diagonal" as const },
    },
    {
      id: "warehouse-cutover",
      label: "Warehouse cutover",
      start: "2026-05-11",
      end: "2026-08-14",
      lane: "data",
      color: "var(--vs-info)",
      pattern: { kind: "crosshatch" as const },
    },
    {
      id: "privacy-review",
      label: "Privacy review",
      start: "2026-06-01",
      end: "2026-07-17",
      lane: "legal",
      color: "var(--vs-error)",
    },
    {
      id: "partner-beta",
      label: "Partner beta",
      start: "2026-07-13",
      end: "2026-10-02",
      lane: "delivery",
      color: "var(--vs-info)",
      pattern: { kind: "crosshatch" as const },
    },
    {
      id: "docs-academy",
      label: "Docs and academy",
      start: "2026-08-17",
      end: "2026-10-30",
      lane: "delivery",
      color: "var(--vs-success)",
    },
    {
      id: "general-availability",
      label: "General availability",
      start: "2026-10-05",
      end: "2026-12-11",
      lane: "release",
      color: "var(--accent)",
    },
    {
      id: "hypercare",
      label: "Hypercare",
      start: "2026-12-01",
      end: "2026-12-23",
      lane: "release",
      color: "var(--vs-warning)",
    },
  ];
  setLayout(value: string): void {
    if (value === "linear" || value === "radial") this.layout.set(value);
  }
}
 
export default GanttChartDemoComponent;

<script lang="ts">
  import { GanttChart } from "@grassroot/charts-svelte";
  import VariantToggle from "./VariantToggle.svelte";
  let layout = $state<"linear" | "radial">("linear");
  const layouts = [
    { value: "linear", label: "Linear" },
    { value: "radial", label: "Radial" },
  ];
 
  const ganttTasks = [
    {
      id: "discovery",
      label: "Customer discovery",
      start: "2026-01-12",
      end: "2026-02-20",
      lane: "product",
      color: "var(--accent)",
    },
    {
      id: "research-synth",
      label: "Research synthesis",
      start: "2026-02-16",
      end: "2026-03-13",
      lane: "product",
      color: "var(--accent)",
    },
    {
      id: "design-system",
      label: "Workflow design system",
      start: "2026-02-09",
      end: "2026-04-17",
      lane: "design",
      color: "var(--vs-success)",
      pattern: { kind: "diagonal" as const },
    },
    {
      id: "content-model",
      label: "Content model",
      start: "2026-03-16",
      end: "2026-05-08",
      lane: "design",
      color: "var(--vs-success)",
      pattern: { kind: "dots" as const },
    },
    {
      id: "api-migration",
      label: "API migration",
      start: "2026-03-16",
      end: "2026-07-24",
      lane: "platform",
      color: "var(--vs-warning)",
      pattern: { kind: "dots" as const },
    },
    {
      id: "identity-federation",
      label: "Identity federation",
      start: "2026-04-20",
      end: "2026-06-26",
      lane: "platform",
      color: "var(--vs-warning)",
      pattern: { kind: "diagonal" as const },
    },
    {
      id: "warehouse-cutover",
      label: "Warehouse cutover",
      start: "2026-05-11",
      end: "2026-08-14",
      lane: "data",
      color: "var(--vs-info)",
      pattern: { kind: "crosshatch" as const },
    },
    {
      id: "privacy-review",
      label: "Privacy review",
      start: "2026-06-01",
      end: "2026-07-17",
      lane: "legal",
      color: "var(--vs-error)",
    },
    {
      id: "partner-beta",
      label: "Partner beta",
      start: "2026-07-13",
      end: "2026-10-02",
      lane: "delivery",
      color: "var(--vs-info)",
      pattern: { kind: "crosshatch" as const },
    },
    {
      id: "docs-academy",
      label: "Docs and academy",
      start: "2026-08-17",
      end: "2026-10-30",
      lane: "delivery",
      color: "var(--vs-success)",
    },
    {
      id: "general-availability",
      label: "General availability",
      start: "2026-10-05",
      end: "2026-12-11",
      lane: "release",
      color: "var(--accent)",
    },
    {
      id: "hypercare",
      label: "Hypercare",
      start: "2026-12-01",
      end: "2026-12-23",
      lane: "release",
      color: "var(--vs-warning)",
    },
  ];
</script>
 
<div>
  <VariantToggle
    label="Layout"
    options={layouts}
    value={layout}
    onchange={(value) => (layout = value as typeof layout)}
  />
  <GanttChart
    ariaLabel="Customer data platform delivery programme with twelve workstreams, 2026"
    {layout}
    items={ganttTasks}
    dependencies={[
      {
        from: "discovery",
        to: "research-synth",
      },
      {
        from: "discovery",
        to: "design-system",
      },
      {
        from: "research-synth",
        to: "content-model",
      },
      {
        from: "design-system",
        to: "api-migration",
      },
      {
        from: "content-model",
        to: "warehouse-cutover",
      },
      {
        from: "api-migration",
        to: "identity-federation",
      },
      {
        from: "api-migration",
        to: "partner-beta",
      },
      {
        from: "privacy-review",
        to: "partner-beta",
      },
      {
        from: "partner-beta",
        to: "docs-academy",
      },
      {
        from: "partner-beta",
        to: "general-availability",
      },
      {
        from: "general-availability",
        to: "hypercare",
      },
    ]} />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { GanttChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";
 
const ganttTasks = [
  {
    id: "discovery",
    label: "Customer discovery",
    start: "2026-01-12",
    end: "2026-02-20",
    lane: "product",
    color: "var(--accent)",
  },
  {
    id: "research-synth",
    label: "Research synthesis",
    start: "2026-02-16",
    end: "2026-03-13",
    lane: "product",
    color: "var(--accent)",
  },
  {
    id: "design-system",
    label: "Workflow design system",
    start: "2026-02-09",
    end: "2026-04-17",
    lane: "design",
    color: "var(--vs-success)",
    pattern: { kind: "diagonal" as const },
  },
  {
    id: "content-model",
    label: "Content model",
    start: "2026-03-16",
    end: "2026-05-08",
    lane: "design",
    color: "var(--vs-success)",
    pattern: { kind: "dots" as const },
  },
  {
    id: "api-migration",
    label: "API migration",
    start: "2026-03-16",
    end: "2026-07-24",
    lane: "platform",
    color: "var(--vs-warning)",
    pattern: { kind: "dots" as const },
  },
  {
    id: "identity-federation",
    label: "Identity federation",
    start: "2026-04-20",
    end: "2026-06-26",
    lane: "platform",
    color: "var(--vs-warning)",
    pattern: { kind: "diagonal" as const },
  },
  {
    id: "warehouse-cutover",
    label: "Warehouse cutover",
    start: "2026-05-11",
    end: "2026-08-14",
    lane: "data",
    color: "var(--vs-info)",
    pattern: { kind: "crosshatch" as const },
  },
  {
    id: "privacy-review",
    label: "Privacy review",
    start: "2026-06-01",
    end: "2026-07-17",
    lane: "legal",
    color: "var(--vs-error)",
  },
  {
    id: "partner-beta",
    label: "Partner beta",
    start: "2026-07-13",
    end: "2026-10-02",
    lane: "delivery",
    color: "var(--vs-info)",
    pattern: { kind: "crosshatch" as const },
  },
  {
    id: "docs-academy",
    label: "Docs and academy",
    start: "2026-08-17",
    end: "2026-10-30",
    lane: "delivery",
    color: "var(--vs-success)",
  },
  {
    id: "general-availability",
    label: "General availability",
    start: "2026-10-05",
    end: "2026-12-11",
    lane: "release",
    color: "var(--accent)",
  },
  {
    id: "hypercare",
    label: "Hypercare",
    start: "2026-12-01",
    end: "2026-12-23",
    lane: "release",
    color: "var(--vs-warning)",
  },
];
 
export default function GanttChartDemo() {
  const [layout, setLayout] = createSignal<"linear" | "radial">("linear");
  const layouts = [
    { value: "linear", label: "Linear" },
    { value: "radial", label: "Radial" },
  ];
  return (
    <div>
      <VariantToggle
        label="Layout"
        options={layouts}
        value={layout}
        onChange={(value) => setLayout(value as "linear" | "radial")}
      />
      <GanttChart
        ariaLabel="Customer data platform delivery programme with twelve workstreams, 2026"
        layout={layout()}
        items={ganttTasks}
        dependencies={[
          {
            from: "discovery",
            to: "research-synth",
          },
          {
            from: "discovery",
            to: "design-system",
          },
          {
            from: "research-synth",
            to: "content-model",
          },
          {
            from: "design-system",
            to: "api-migration",
          },
          {
            from: "content-model",
            to: "warehouse-cutover",
          },
          {
            from: "api-migration",
            to: "identity-federation",
          },
          {
            from: "api-migration",
            to: "partner-beta",
          },
          {
            from: "privacy-review",
            to: "partner-beta",
          },
          {
            from: "partner-beta",
            to: "docs-academy",
          },
          {
            from: "partner-beta",
            to: "general-availability",
          },
          {
            from: "general-availability",
            to: "hypercare",
          },
        ]} />
    </div>
  );
}

Installation

API Reference

Import

import { useState } from "react";
import { GanttChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";

Props

Prop

Type

Default

Requirement

Description

items

readonly TimelineItem[]

—

required

—

dependencies

readonly GanttDependency[] | undefined

—

optional

—

layout

"linear" | "radial" | "spiral" | undefined

—

optional

—

brushDomain

ChartXDomain | undefined

—

optional

—

defaultBrushDomain

ChartXDomain | undefined

—

optional

—

onBrushDomainChange

((domain: ChartXDomain) => void) | undefined

—

optional

—

zoomDomain

ChartXDomain | undefined

—

optional

—

defaultZoomDomain

ChartXDomain | undefined

—

optional

—

onZoomDomainChange

((domain: ChartXDomain) => void) | undefined

—

optional

—

zoomOnBrush

boolean | undefined

—

optional

—

formatXValue

((value: Date, index: number) => string) | undefined

—

optional

—

locale

string | readonly string[] | undefined

—

optional

—

timeZone

string | undefined

—

optional

—

referenceLines

readonly { value: Date | string | number; label?: string; }[] | undefined

—

optional

—

Prop: items
Type: readonly TimelineItem[]
Default: —
Requirement: required
Description: —

Prop: dependencies
Type: readonly GanttDependency[] | undefined
Default: —
Requirement: optional
Description: —

Prop: layout
Type: "linear" | "radial" | "spiral" | undefined
Default: —
Requirement: optional
Description: —

Prop: brushDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultBrushDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional
Description: —

Prop: onBrushDomainChange
Type: ((domain: ChartXDomain) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: zoomDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultZoomDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional
Description: —

Prop: onZoomDomainChange
Type: ((domain: ChartXDomain) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: zoomOnBrush
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: formatXValue
Type: ((value: Date, index: number) => string) | undefined
Default: —
Requirement: optional
Description: —

Prop: locale
Type: string | readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: timeZone
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: referenceLines
Type: readonly { value: Date | string | number; label?: string; }[] | undefined
Default: —
Requirement: optional
Description: —

Prop: referenceBands
Type: readonly { from: Date | string | number; to: Date | string | number; label?: string; }[] | undefined
Default: —
Requirement: optional
Description: —

Prop: legend
Type: boolean | import("@grassroot/chart-spec").LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: boolean | import("./base").ExpandedChartAnimationConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: onHiddenSeriesChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: onActiveDatumChange
Type: ((id: string | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional
Description: —

Prop: className
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: theme
Type: import("@grassroot/theme").PartialChartTheme | undefined
Default: —
Requirement: optional
Description: —

Prop: title
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: description
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: keyboardNavigation
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: width
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: height
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional
Description: —

Prop: rendererStrategy
Type: Partial<import("@grassroot/core").ChartRendererStrategy> | undefined
Default: —
Requirement: optional
Description: —

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: —
Requirement: optional
Description: —

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: Gates every pointer/keyboard interaction the shell owns (hit-test on pointer move, focus-to-first, arrow navigation, Escape) and, with `keyboardNavigation`, whether the plot surface is focusable at all.

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.

Prop: speed
Type: number | undefined
Default: —
Requirement: optional
Description: Playback-speed multiplier for entrance/ambient motion.

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional
Description: How long a dataset change tweens, in milliseconds.

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional
Description: Changing this value replays the entrance animation.

Events

Event	Payload
`onBrushDomainChange`	`((domain: ChartXDomain) => void) \| undefined`
`onZoomDomainChange`	`((domain: ChartXDomain) => void) \| undefined`
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { ref } from "vue";
import { GanttChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";

Props

Prop

Type

Default

Requirement

className

string | undefined

—

optional

gpuBackend

"auto" | "webgpu" | "webgl2" | undefined

—

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

showGrid

boolean | undefined

—

optional

legend

boolean | LegendConfig | undefined

false

optional

animation

ChartAnimationInput | undefined

—

optional

interactive

boolean | undefined

true

optional

keyboardNavigation

boolean | undefined

true

optional

hiddenSeries

readonly string[] | undefined

—

optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: gpuBackend
Type: "auto" | "webgpu" | "webgl2" | undefined
Default: —
Requirement: optional

Prop: width
Type: number | undefined
Default: —
Requirement: optional

Prop: height
Type: number | undefined
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy> | undefined
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput | undefined
Default: —
Requirement: optional

Prop: interactive
Type: boolean | undefined
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean | undefined
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: () => []
Requirement: optional

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: speed
Type: number | undefined
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme | undefined
Default: —
Requirement: optional

Prop: title
Type: string | undefined
Default: —
Requirement: optional

Prop: description
Type: string | undefined
Default: —
Requirement: optional

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional

Prop: items
Type: readonly TimelineItem[]
Default: —
Requirement: required

Prop: dependencies
Type: readonly GanttDependency[] | undefined
Default: () => []
Requirement: optional

Prop: layout
Type: "linear" | "radial" | "spiral" | undefined
Default: —
Requirement: optional

Prop: formatXValue
Type: ((value: Date, index: number) => string) | undefined
Default: —
Requirement: optional

Prop: locale
Type: string | readonly string[] | undefined
Default: —
Requirement: optional

Prop: timeZone
Type: string | undefined
Default: —
Requirement: optional

Prop: referenceLines
Type: readonly { readonly value: Date | string | number; readonly label?: string; }[] | undefined
Default: —
Requirement: optional

Prop: referenceBands
Type: readonly { readonly from: Date | string | number; readonly to: Date | string | number; readonly label?: string; }[] | undefined
Default: —
Requirement: optional

Prop: brushDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional

Prop: defaultBrushDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional

Prop: zoomDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional

Prop: defaultZoomDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional

Prop: zoomOnBrush
Type: boolean | undefined
Default: false
Requirement: optional

Events

Event	Payload
`hiddenSeriesChange`	`[ids: readonly string[]]`
`activeDatumChange`	`[id: string \| null]`
`brushDomainChange`	`[domain: ChartXDomain]`
`zoomDomainChange`	`[domain: ChartXDomain]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootGanttChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";

Props

Prop

Type

Default

Requirement

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

animation

ChartAnimationInput

—

optional

interactive

boolean

true

optional

keyboardNavigation

boolean

true

optional

legend

boolean | LegendConfig

—

optional

hiddenSeries

readonly string[]

—

optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: []
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: null
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: brushDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: defaultBrushDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: zoomDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: defaultZoomDomain
Type: ChartXDomain
Default: null
Requirement: optional

Prop: zoomOnBrush
Type: boolean
Default: false
Requirement: optional

Prop: items
Type: readonly TimelineItem[]
Default: —
Requirement: required

Prop: dependencies
Type: readonly GanttDependency[]
Default: []
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: className
Type: string
Default: —
Requirement: optional

Prop: layout
Type: GanttChartOptions["layout"]
Default: —
Requirement: optional

Prop: formatXValue
Type: GanttChartOptions["formatXValue"]
Default: —
Requirement: optional

Prop: locale
Type: GanttChartOptions["locale"]
Default: —
Requirement: optional

Prop: timeZone
Type: GanttChartOptions["timeZone"]
Default: —
Requirement: optional

Prop: referenceLines
Type: GanttChartOptions["referenceLines"]
Default: —
Requirement: optional

Prop: referenceBands
Type: GanttChartOptions["referenceBands"]
Default: —
Requirement: optional

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`
`brushDomainChange`	`ChartXDomain`
`zoomDomainChange`	`ChartXDomain`

Content regions

dataSummary
default

Import

import { GanttChart } from "@grassroot/charts-svelte";
import VariantToggle from "./VariantToggle.svelte";

Props

Prop

Type

Default

Requirement

items

readonly TimelineItem[]

—

required

dependencies

readonly GanttDependency[]

—

optional

layout

GanttChartOptions["layout"]

—

optional

formatXValue

GanttChartOptions["formatXValue"]

—

optional

locale

GanttChartOptions["locale"]

—

optional

timeZone

GanttChartOptions["timeZone"]

—

optional

referenceLines

GanttChartOptions["referenceLines"]

—

optional

referenceBands

GanttChartOptions["referenceBands"]

—

optional

brushDomain

{ readonly start: number; readonly end: number } | null

—

optional

defaultBrushDomain

{ readonly start: number; readonly end: number } | null

—

optional

onBrushDomainChange

(domain: { readonly start: number; readonly end: number } | null) => void

—

optional

zoomDomain

{ readonly start: number; readonly end: number } | null

—

optional

defaultZoomDomain

{ readonly start: number; readonly end: number } | null

null

optional

onZoomDomainChange

(domain: { readonly start: number; readonly end: number } | null) => void

—

optional

Prop: items
Type: readonly TimelineItem[]
Default: —
Requirement: required

Prop: dependencies
Type: readonly GanttDependency[]
Default: —
Requirement: optional

Prop: layout
Type: GanttChartOptions["layout"]
Default: —
Requirement: optional

Prop: formatXValue
Type: GanttChartOptions["formatXValue"]
Default: —
Requirement: optional

Prop: locale
Type: GanttChartOptions["locale"]
Default: —
Requirement: optional

Prop: timeZone
Type: GanttChartOptions["timeZone"]
Default: —
Requirement: optional

Prop: referenceLines
Type: GanttChartOptions["referenceLines"]
Default: —
Requirement: optional

Prop: referenceBands
Type: GanttChartOptions["referenceBands"]
Default: —
Requirement: optional

Prop: brushDomain
Type: { readonly start: number; readonly end: number } | null
Default: —
Requirement: optional

Prop: defaultBrushDomain
Type: { readonly start: number; readonly end: number } | null
Default: —
Requirement: optional

Prop: onBrushDomainChange
Type: (domain: { readonly start: number; readonly end: number } | null) => void
Default: —
Requirement: optional

Prop: zoomDomain
Type: { readonly start: number; readonly end: number } | null
Default: —
Requirement: optional

Prop: defaultZoomDomain
Type: { readonly start: number; readonly end: number } | null
Default: null
Requirement: optional

Prop: onZoomDomainChange
Type: (domain: { readonly start: number; readonly end: number } | null) => void
Default: —
Requirement: optional

Prop: zoomOnBrush
Type: boolean
Default: false
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: string
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onBrushDomainChange`	`(domain: { readonly start: number; readonly end: number } \| null) => void`
`onZoomDomainChange`	`(domain: { readonly start: number; readonly end: number } \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`

Content regions

children
dataSummary

Import

import { createSignal } from "solid-js";
import { GanttChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";

Props

Prop

Type

Default

Requirement

items

readonly TimelineItem[]

—

required

dependencies

readonly GanttDependency[]

—

optional

layout

GanttChartOptions["layout"]

—

optional

formatXValue

(value: Date, index: number) => string

—

optional

locale

string | readonly string[]

—

optional

timeZone

string

—

optional

referenceLines

readonly { readonly value: Date | string | number; readonly label?: string }[]

—

optional

referenceBands

readonly { readonly from: Date | string | number; readonly to: Date | string | number; readonly label?: string }[]

—

optional

brushDomain

ChartXDomain

—

optional

defaultBrushDomain

ChartXDomain

—

optional

onBrushDomainChange

(domain: ChartXDomain) => void

—

optional

zoomDomain

ChartXDomain

—

optional

defaultZoomDomain

ChartXDomain

—

optional

onZoomDomainChange

(domain: ChartXDomain) => void

—

optional

Prop: items
Type: readonly TimelineItem[]
Default: —
Requirement: required

Prop: dependencies
Type: readonly GanttDependency[]
Default: —
Requirement: optional

Prop: layout
Type: GanttChartOptions["layout"]
Default: —
Requirement: optional

Prop: formatXValue
Type: (value: Date, index: number) => string
Default: —
Requirement: optional

Prop: locale
Type: string | readonly string[]
Default: —
Requirement: optional

Prop: timeZone
Type: string
Default: —
Requirement: optional

Prop: referenceLines
Type: readonly { readonly value: Date | string | number; readonly label?: string }[]
Default: —
Requirement: optional

Prop: referenceBands
Type: readonly { readonly from: Date | string | number; readonly to: Date | string | number; readonly label?: string }[]
Default: —
Requirement: optional

Prop: brushDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: defaultBrushDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: onBrushDomainChange
Type: (domain: ChartXDomain) => void
Default: —
Requirement: optional

Prop: zoomDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: defaultZoomDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: onZoomDomainChange
Type: (domain: ChartXDomain) => void
Default: —
Requirement: optional

Prop: zoomOnBrush
Type: boolean
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: JSX.CSSProperties
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onBrushDomainChange`	`(domain: ChartXDomain) => void`
`onZoomDomainChange`	`(domain: ChartXDomain) => void`
`onActiveDatumChange`	`(id: string \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary