TimelineChart

import { TimelineChart } from "@grassroot/charts-react";
 
const timeline = [
  { id: "design", label: "Design", start: "2026-01-01", end: "2026-01-12", lane: "Plan" },
  { id: "build", label: "Build", start: "2026-01-10", end: "2026-02-03", lane: "Ship" },
  { id: "launch", label: "Launch", start: "2026-02-05", lane: "Ship", milestone: true },
];
 
 
<TimelineChart items={timeline} />

<script setup lang="ts">
import { TimelineChart } from "@grassroot/charts-vue";
 
const timeline = [
  { id: "design", label: "Design", start: "2026-01-01", end: "2026-01-12", lane: "Plan" },
  { id: "build", label: "Build", start: "2026-01-10", end: "2026-02-03", lane: "Ship" },
  { id: "launch", label: "Launch", start: "2026-02-05", lane: "Ship", milestone: true },
];
</script>
 
<template>
  <TimelineChart :items='timeline' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootTimelineChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-timeline-chart-chart-demo",
  standalone: true,
  imports: [GrassrootTimelineChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-timeline-chart [items]='timeline' />`,
})
export class TimelineChartDemoComponent {
  readonly timeline = [
    { id: "design", label: "Design", start: "2026-01-01", end: "2026-01-12", lane: "Plan" },
    { id: "build", label: "Build", start: "2026-01-10", end: "2026-02-03", lane: "Ship" },
    { id: "launch", label: "Launch", start: "2026-02-05", lane: "Ship", milestone: true },
  ];
}
 
export default TimelineChartDemoComponent;

<script lang="ts">
  import { TimelineChart } from "@grassroot/charts-svelte";
 
  const timeline = [
    { id: "design", label: "Design", start: "2026-01-01", end: "2026-01-12", lane: "Plan" },
    { id: "build", label: "Build", start: "2026-01-10", end: "2026-02-03", lane: "Ship" },
    { id: "launch", label: "Launch", start: "2026-02-05", lane: "Ship", milestone: true },
  ];
</script>
 
<TimelineChart items={timeline} />

/** @jsxImportSource solid-js */
import { TimelineChart } from "@grassroot/charts-solid";
 
const timeline = [
  { id: "design", label: "Design", start: "2026-01-01", end: "2026-01-12", lane: "Plan" },
  { id: "build", label: "Build", start: "2026-01-10", end: "2026-02-03", lane: "Ship" },
  { id: "launch", label: "Launch", start: "2026-02-05", lane: "Ship", milestone: true },
];
 
export default function TimelineChartDemo() {
  return <TimelineChart items={timeline} />;
}