SwimlaneTimelineChart

import { SwimlaneTimelineChart } 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 },
];
 
 
<SwimlaneTimelineChart items={timeline} />

<script setup lang="ts">
import { SwimlaneTimelineChart } 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>
  <SwimlaneTimelineChart :items='timeline' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootSwimlaneTimelineChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-swimlane-timeline-chart-chart-demo",
  standalone: true,
  imports: [GrassrootSwimlaneTimelineChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-swimlane-timeline-chart [items]='timeline' />`,
})
export class SwimlaneTimelineChartDemoComponent {
  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 SwimlaneTimelineChartDemoComponent;

<script lang="ts">
  import { SwimlaneTimelineChart } 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>
 
<SwimlaneTimelineChart items={timeline} />

/** @jsxImportSource solid-js */
import { SwimlaneTimelineChart } 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 SwimlaneTimelineChartDemo() {
  return <SwimlaneTimelineChart items={timeline} />;
}