GanttChart

import { GanttChart } from "@grassroot/charts-react";
 
const ganttTasks = [
  { id: "rewrite", label: "Ledger v2 rewrite", start: "2026-01-01", end: "2026-04-18", lane: "platform", color: "var(--accent)" },
  { id: "billing", label: "Billing migration", start: "2026-04-01", end: "2026-07-22", lane: "payments", color: "var(--vs-success)", pattern: { kind: "diagonal" as const } },
  { id: "analytics", label: "Analytics pipeline", start: "2026-07-01", end: "2026-11-10", lane: "data", color: "var(--vs-warning)", pattern: { kind: "dots" as const } },
  { id: "edge", label: "Edge rollout", start: "2026-09-14", end: "2026-12-31", lane: "infra", color: "var(--vs-info)", pattern: { kind: "crosshatch" as const } },
];
 
 
<GanttChart items={ganttTasks} columns={["Q1", "Q2", "Q3", "Q4"]} today={"2026-08-12"} labelHeading={"Workstream"} dependencies={[{ from: "rewrite", to: "billing" }, { from: "billing", to: "analytics" }, { from: "analytics", to: "edge" }]} />

<script setup lang="ts">
import { GanttChart } from "@grassroot/charts-vue";
 
const ganttTasks = [
  { id: "rewrite", label: "Ledger v2 rewrite", start: "2026-01-01", end: "2026-04-18", lane: "platform", color: "var(--accent)" },
  { id: "billing", label: "Billing migration", start: "2026-04-01", end: "2026-07-22", lane: "payments", color: "var(--vs-success)", pattern: { kind: "diagonal" as const } },
  { id: "analytics", label: "Analytics pipeline", start: "2026-07-01", end: "2026-11-10", lane: "data", color: "var(--vs-warning)", pattern: { kind: "dots" as const } },
  { id: "edge", label: "Edge rollout", start: "2026-09-14", end: "2026-12-31", lane: "infra", color: "var(--vs-info)", pattern: { kind: "crosshatch" as const } },
];
</script>
 
<template>
  <GanttChart :items='ganttTasks' :columns='["Q1", "Q2", "Q3", "Q4"]' :today='"2026-08-12"' :labelHeading='"Workstream"' :dependencies='[{ from: "rewrite", to: "billing" }, { from: "billing", to: "analytics" }, { from: "analytics", to: "edge" }]' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootGanttChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-gantt-chart-chart-demo",
  standalone: true,
  imports: [GrassrootGanttChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-gantt-chart [items]='ganttTasks' [columns]='["Q1", "Q2", "Q3", "Q4"]' [today]='"2026-08-12"' [labelHeading]='"Workstream"' [dependencies]='[{ from: "rewrite", to: "billing" }, { from: "billing", to: "analytics" }, { from: "analytics", to: "edge" }]' />`,
})
export class GanttChartDemoComponent {
  readonly ganttTasks = [
    { id: "rewrite", label: "Ledger v2 rewrite", start: "2026-01-01", end: "2026-04-18", lane: "platform", color: "var(--accent)" },
    { id: "billing", label: "Billing migration", start: "2026-04-01", end: "2026-07-22", lane: "payments", color: "var(--vs-success)", pattern: { kind: "diagonal" as const } },
    { id: "analytics", label: "Analytics pipeline", start: "2026-07-01", end: "2026-11-10", lane: "data", color: "var(--vs-warning)", pattern: { kind: "dots" as const } },
    { id: "edge", label: "Edge rollout", start: "2026-09-14", end: "2026-12-31", lane: "infra", color: "var(--vs-info)", pattern: { kind: "crosshatch" as const } },
  ];
}
 
export default GanttChartDemoComponent;

<script lang="ts">
  import { GanttChart } from "@grassroot/charts-svelte";
 
  const ganttTasks = [
    { id: "rewrite", label: "Ledger v2 rewrite", start: "2026-01-01", end: "2026-04-18", lane: "platform", color: "var(--accent)" },
    { id: "billing", label: "Billing migration", start: "2026-04-01", end: "2026-07-22", lane: "payments", color: "var(--vs-success)", pattern: { kind: "diagonal" as const } },
    { id: "analytics", label: "Analytics pipeline", start: "2026-07-01", end: "2026-11-10", lane: "data", color: "var(--vs-warning)", pattern: { kind: "dots" as const } },
    { id: "edge", label: "Edge rollout", start: "2026-09-14", end: "2026-12-31", lane: "infra", color: "var(--vs-info)", pattern: { kind: "crosshatch" as const } },
  ];
</script>
 
<GanttChart items={ganttTasks} columns={["Q1", "Q2", "Q3", "Q4"]} today={"2026-08-12"} labelHeading={"Workstream"} dependencies={[{ from: "rewrite", to: "billing" }, { from: "billing", to: "analytics" }, { from: "analytics", to: "edge" }]} />

/** @jsxImportSource solid-js */
import { GanttChart } from "@grassroot/charts-solid";
 
const ganttTasks = [
  { id: "rewrite", label: "Ledger v2 rewrite", start: "2026-01-01", end: "2026-04-18", lane: "platform", color: "var(--accent)" },
  { id: "billing", label: "Billing migration", start: "2026-04-01", end: "2026-07-22", lane: "payments", color: "var(--vs-success)", pattern: { kind: "diagonal" as const } },
  { id: "analytics", label: "Analytics pipeline", start: "2026-07-01", end: "2026-11-10", lane: "data", color: "var(--vs-warning)", pattern: { kind: "dots" as const } },
  { id: "edge", label: "Edge rollout", start: "2026-09-14", end: "2026-12-31", lane: "infra", color: "var(--vs-info)", pattern: { kind: "crosshatch" as const } },
];
 
export default function GanttChartDemo() {
  return <GanttChart items={ganttTasks} columns={["Q1", "Q2", "Q3", "Q4"]} today={"2026-08-12"} labelHeading={"Workstream"} dependencies={[{ from: "rewrite", to: "billing" }, { from: "billing", to: "analytics" }, { from: "analytics", to: "edge" }]} />;
}