Components
Chart
Eleven typed chart forms with ordered palette roles, responsive geometry, shared inspection and an accessible data table. Compose with Card and DataTrend for metric panels.
Preview
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="line" label="Weekly activity" description="Original illustrative data." className="w-full min-w-0" data={sampleChartRows} series={sampleChartSeries} axes grid xScale="category" />Usage
When to use
- Show changes, comparisons, composition, conversion, retention or service availability from numeric data.
- Keep an accessible data table beside visual patterns and point inspection.
When not to use
- A single current value and its change. Use DataTrend.
- Completion toward a known total. Use Progress.
- Editing individual measurements. Use Table with form controls.
Variants
table
Toggle reveals the semantic data view. Hidden keeps the table accessible with visually hidden presentation. Sparkline defaults hidden.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="line" label="Weekly activity" description="Original illustrative data." className="w-full min-w-0" data={sampleChartRows} series={sampleChartSeries} axes grid xScale="category" />
<Chart type="line" label="Weekly activity" description="Original illustrative data." table="visible" className="w-full min-w-0" data={sampleChartRows} series={sampleChartSeries} axes grid xScale="category" />
<Chart type="line" label="Weekly activity" description="Original illustrative data." table="hidden" className="w-full min-w-0" data={sampleChartRows} series={sampleChartSeries} axes grid xScale="category" />xScale
Cartesian axis spacing. Numeric and time modes require finite, strictly ascending x values; time uses epoch milliseconds. Without formatX, time positions show a short UTC date.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
const sampleLinearRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 2,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 3,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 4,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 5,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 6,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 7,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="line" label="Weekly activity" description="Original illustrative data." className="w-full min-w-0" data={sampleChartRows} series={sampleChartSeries} axes grid xScale="category" />
<Chart type="line" label="Weekly activity" description="Original illustrative data." className="w-full min-w-0" data={sampleLinearRows} series={sampleChartSeries} axes grid xScale="linear" />
<Chart type="line" label="Weekly activity" description="Original illustrative data." className="w-full min-w-0" data={sampleChartRows} series={sampleChartSeries} axes grid xScale="time" />Examples
Three-series line
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="line" label="Weekly activity" data={sampleChartRows} series={sampleChartSeries} />Overlaid areas
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="area" label="Audience over time" data={sampleChartRows} series={sampleChartSeries} stack="none" />Stacked areas
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="area" label="Allocation over time" data={sampleChartRows} series={sampleChartSeries} stack="normal" />Vertical grouped bars
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="bar" label="Grouped activity" data={sampleChartRows} series={sampleChartSeries} orientation="vertical" layout="grouped" />Vertical stacked bars
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="bar" label="Stacked activity" data={sampleChartRows} series={sampleChartSeries} orientation="vertical" layout="stacked" />Vertical percentage bars
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="bar" label="Percentage activity" data={sampleChartRows} series={sampleChartSeries} orientation="vertical" layout="percentage" />Horizontal grouped bars
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="bar" label="Grouped activity" data={sampleChartRows} series={sampleChartSeries} orientation="horizontal" layout="grouped" />Horizontal stacked bars
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="bar" label="Stacked activity" data={sampleChartRows} series={sampleChartSeries} orientation="horizontal" layout="stacked" />Horizontal percentage bars
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="bar" label="Percentage activity" data={sampleChartRows} series={sampleChartSeries} orientation="horizontal" layout="percentage" />Compact table bar
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartRow, ChartSeries } from "@/components/ui/chart"
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
const sampleSparkSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
}
];
<Chart type="bar" label="Views against a shared maximum" data={sampleChartRows} series={sampleSparkSeries} orientation="horizontal" compact domain={[0, 600]} table="hidden" />Sparkline
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartRow, ChartSeries } from "@/components/ui/chart"
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
const sampleSparkSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
}
];
<Chart type="sparkline" label="Views this week" data={sampleChartRows} series={sampleSparkSeries} />Composition
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartItem } from "@/components/ui/chart"
const sampleChartParts: ChartItem[] = [
{
"id": "direct",
"label": "Direct",
"value": 480
},
{
"id": "search",
"label": "Search",
"value": 320
},
{
"id": "community",
"label": "Community",
"value": 180
},
{
"id": "other",
"label": "Other",
"value": 90,
"role": "other"
}
];
<Chart type="composition" label="Traffic sources" data={sampleChartParts} />Donut
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartItem } from "@/components/ui/chart"
const sampleChartParts: ChartItem[] = [
{
"id": "direct",
"label": "Direct",
"value": 480
},
{
"id": "search",
"label": "Search",
"value": 320
},
{
"id": "community",
"label": "Community",
"value": 180
},
{
"id": "other",
"label": "Other",
"value": 90,
"role": "other"
}
];
<Chart type="donut" label="Traffic sources" data={sampleChartParts} />Ordered funnel
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartItem } from "@/components/ui/chart"
const sampleFunnelParts: ChartItem[] = [
{
"id": "visit",
"label": "Visited",
"value": 1200
},
{
"id": "start",
"label": "Started",
"value": 760
},
{
"id": "review",
"label": "Reviewed",
"value": 440
},
{
"id": "complete",
"label": "Completed",
"value": 260
}
];
<Chart type="funnel" label="Journey conversion" data={sampleFunnelParts} />Timeline
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartRange } from "@/components/ui/chart"
const sampleChartRanges: ChartRange[] = [
{
"id": "discovery",
"label": "Discovery",
"start": 0,
"end": 5,
"status": "success"
},
{
"id": "prototype",
"label": "Prototype",
"start": 4,
"end": 12,
"status": "warning"
},
{
"id": "build",
"label": "Build",
"start": 10,
"end": 24,
"status": "danger"
},
{
"id": "review",
"label": "Review",
"start": 24,
"end": 24,
"status": "neutral"
}
];
<Chart type="timeline" label="Delivery schedule" data={sampleChartRanges} range={[0, 28]} marker={{ value: 14, label: "Checkpoint" }} />Cohort retention
Original illustrative cohorts. Null means not yet observed; zero means an observed zero percent.
import { Chart } from "@/components/ui/chart"
import type { ChartCohortRow } from "@/components/ui/chart"
const sampleCohortColumns: Array<{ id: string; label: string }> = [
{
"id": "w0",
"label": "Week 0"
},
{
"id": "w1",
"label": "Week 1"
},
{
"id": "w2",
"label": "Week 2"
},
{
"id": "w3",
"label": "Week 3"
}
];
const sampleChartCohorts: ChartCohortRow[] = [
{
"id": "a",
"label": "Cohort A",
"size": 240,
"values": [
100,
72,
54,
42
]
},
{
"id": "b",
"label": "Cohort B",
"size": 280,
"values": [
100,
75,
58,
null
]
},
{
"id": "c",
"label": "Cohort C",
"size": 310,
"values": [
100,
78,
null,
null
]
},
{
"id": "d",
"label": "Cohort D",
"size": 330,
"values": [
100,
null,
null,
null
]
}
];
<Chart type="cohort" label="Weekly retention" data={sampleChartCohorts} columns={sampleCohortColumns} />Service uptime
Original equal-duration observations. Unknown periods remain explicit; summaries average known availability.
import { Chart } from "@/components/ui/chart"
import type { ChartUptimeRow } from "@/components/ui/chart"
const sampleChartUptime: ChartUptimeRow[] = [
{
"id": "gateway",
"label": "Gateway",
"samples": [
{
"id": "day-1",
"label": "Day 1",
"status": "success",
"availability": 100
},
{
"id": "day-2",
"label": "Day 2",
"status": "success",
"availability": 100
},
{
"id": "day-3",
"label": "Day 3",
"status": "success",
"availability": 100
},
{
"id": "day-4",
"label": "Day 4",
"status": "success",
"availability": 100
},
{
"id": "day-5",
"label": "Day 5",
"status": "success",
"availability": 100
},
{
"id": "day-6",
"label": "Day 6",
"status": "success",
"availability": 100
},
{
"id": "day-7",
"label": "Day 7",
"status": "success",
"availability": 100
},
{
"id": "day-8",
"label": "Day 8",
"status": "success",
"availability": 100
},
{
"id": "day-9",
"label": "Day 9",
"status": "success",
"availability": 100
},
{
"id": "day-10",
"label": "Day 10",
"status": "success",
"availability": 100
},
{
"id": "day-11",
"label": "Day 11",
"status": "success",
"availability": 100
},
{
"id": "day-12",
"label": "Day 12",
"status": "success",
"availability": 100
},
{
"id": "day-13",
"label": "Day 13",
"status": "success",
"availability": 100
},
{
"id": "day-14",
"label": "Day 14",
"status": "success",
"availability": 100
},
{
"id": "day-15",
"label": "Day 15",
"status": "success",
"availability": 100
},
{
"id": "day-16",
"label": "Day 16",
"status": "success",
"availability": 100
},
{
"id": "day-17",
"label": "Day 17",
"status": "success",
"availability": 100
},
{
"id": "day-18",
"label": "Day 18",
"status": "success",
"availability": 100
},
{
"id": "day-19",
"label": "Day 19",
"status": "success",
"availability": 100
},
{
"id": "day-20",
"label": "Day 20",
"status": "success",
"availability": 100
},
{
"id": "day-21",
"label": "Day 21",
"status": "success",
"availability": 100
},
{
"id": "day-22",
"label": "Day 22",
"status": "success",
"availability": 100
},
{
"id": "day-23",
"label": "Day 23",
"status": "success",
"availability": 100
},
{
"id": "day-24",
"label": "Day 24",
"status": "success",
"availability": 100
},
{
"id": "day-25",
"label": "Day 25",
"status": "success",
"availability": 100
},
{
"id": "day-26",
"label": "Day 26",
"status": "success",
"availability": 100
},
{
"id": "day-27",
"label": "Day 27",
"status": "success",
"availability": 100
},
{
"id": "day-28",
"label": "Day 28",
"status": "success",
"availability": 100
},
{
"id": "day-29",
"label": "Day 29",
"status": "success",
"availability": 100
},
{
"id": "day-30",
"label": "Day 30",
"status": "success",
"availability": 100
},
{
"id": "day-31",
"label": "Day 31",
"status": "success",
"availability": 100
},
{
"id": "day-32",
"label": "Day 32",
"status": "success",
"availability": 100
},
{
"id": "day-33",
"label": "Day 33",
"status": "success",
"availability": 100
},
{
"id": "day-34",
"label": "Day 34",
"status": "success",
"availability": 100
},
{
"id": "day-35",
"label": "Day 35",
"status": "success",
"availability": 100
},
{
"id": "day-36",
"label": "Day 36",
"status": "success",
"availability": 100
},
{
"id": "day-37",
"label": "Day 37",
"status": "success",
"availability": 100
},
{
"id": "day-38",
"label": "Day 38",
"status": "success",
"availability": 100
},
{
"id": "day-39",
"label": "Day 39",
"status": "success",
"availability": 100
},
{
"id": "day-40",
"label": "Day 40",
"status": "success",
"availability": 100
},
{
"id": "day-41",
"label": "Day 41",
"status": "success",
"availability": 100
},
{
"id": "day-42",
"label": "Day 42",
"status": "success",
"availability": 100
},
{
"id": "day-43",
"label": "Day 43",
"status": "success",
"availability": 100
},
{
"id": "day-44",
"label": "Day 44",
"status": "warning",
"availability": 99.2
},
{
"id": "day-45",
"label": "Day 45",
"status": "success",
"availability": 100
},
{
"id": "day-46",
"label": "Day 46",
"status": "success",
"availability": 100
},
{
"id": "day-47",
"label": "Day 47",
"status": "success",
"availability": 100
},
{
"id": "day-48",
"label": "Day 48",
"status": "success",
"availability": 100
},
{
"id": "day-49",
"label": "Day 49",
"status": "success",
"availability": 100
},
{
"id": "day-50",
"label": "Day 50",
"status": "success",
"availability": 100
},
{
"id": "day-51",
"label": "Day 51",
"status": "success",
"availability": 100
},
{
"id": "day-52",
"label": "Day 52",
"status": "success",
"availability": 100
},
{
"id": "day-53",
"label": "Day 53",
"status": "success",
"availability": 100
},
{
"id": "day-54",
"label": "Day 54",
"status": "success",
"availability": 100
},
{
"id": "day-55",
"label": "Day 55",
"status": "success",
"availability": 100
},
{
"id": "day-56",
"label": "Day 56",
"status": "success",
"availability": 100
},
{
"id": "day-57",
"label": "Day 57",
"status": "success",
"availability": 100
},
{
"id": "day-58",
"label": "Day 58",
"status": "success",
"availability": 100
},
{
"id": "day-59",
"label": "Day 59",
"status": "success",
"availability": 100
},
{
"id": "day-60",
"label": "Day 60",
"status": "success",
"availability": 100
},
{
"id": "day-61",
"label": "Day 61",
"status": "success",
"availability": 100
},
{
"id": "day-62",
"label": "Day 62",
"status": "success",
"availability": 100
},
{
"id": "day-63",
"label": "Day 63",
"status": "success",
"availability": 100
},
{
"id": "day-64",
"label": "Day 64",
"status": "success",
"availability": 100
},
{
"id": "day-65",
"label": "Day 65",
"status": "success",
"availability": 100
},
{
"id": "day-66",
"label": "Day 66",
"status": "success",
"availability": 100
},
{
"id": "day-67",
"label": "Day 67",
"status": "success",
"availability": 100
},
{
"id": "day-68",
"label": "Day 68",
"status": "success",
"availability": 100
},
{
"id": "day-69",
"label": "Day 69",
"status": "danger",
"availability": 96.8
},
{
"id": "day-70",
"label": "Day 70",
"status": "success",
"availability": 100
},
{
"id": "day-71",
"label": "Day 71",
"status": "success",
"availability": 100
},
{
"id": "day-72",
"label": "Day 72",
"status": "success",
"availability": 100
},
{
"id": "day-73",
"label": "Day 73",
"status": "success",
"availability": 100
},
{
"id": "day-74",
"label": "Day 74",
"status": "success",
"availability": 100
},
{
"id": "day-75",
"label": "Day 75",
"status": "success",
"availability": 100
},
{
"id": "day-76",
"label": "Day 76",
"status": "success",
"availability": 100
},
{
"id": "day-77",
"label": "Day 77",
"status": "success",
"availability": 100
},
{
"id": "day-78",
"label": "Day 78",
"status": "success",
"availability": 100
},
{
"id": "day-79",
"label": "Day 79",
"status": "success",
"availability": 100
},
{
"id": "day-80",
"label": "Day 80",
"status": "success",
"availability": 100
},
{
"id": "day-81",
"label": "Day 81",
"status": "success",
"availability": 100
},
{
"id": "day-82",
"label": "Day 82",
"status": "success",
"availability": 100
},
{
"id": "day-83",
"label": "Day 83",
"status": "success",
"availability": 100
},
{
"id": "day-84",
"label": "Day 84",
"status": "success",
"availability": 100
},
{
"id": "day-85",
"label": "Day 85",
"status": "success",
"availability": 100
},
{
"id": "day-86",
"label": "Day 86",
"status": "success",
"availability": 100
},
{
"id": "day-87",
"label": "Day 87",
"status": "success",
"availability": 100
},
{
"id": "day-88",
"label": "Day 88",
"status": "success",
"availability": 100
},
{
"id": "day-89",
"label": "Day 89",
"status": "success",
"availability": 100
},
{
"id": "day-90",
"label": "Day 90",
"status": "unknown",
"availability": null
}
]
},
{
"id": "queue",
"label": "Queue",
"samples": [
{
"id": "day-1",
"label": "Day 1",
"status": "success",
"availability": 100
},
{
"id": "day-2",
"label": "Day 2",
"status": "success",
"availability": 100
},
{
"id": "day-3",
"label": "Day 3",
"status": "success",
"availability": 100
},
{
"id": "day-4",
"label": "Day 4",
"status": "success",
"availability": 100
},
{
"id": "day-5",
"label": "Day 5",
"status": "success",
"availability": 100
},
{
"id": "day-6",
"label": "Day 6",
"status": "success",
"availability": 100
},
{
"id": "day-7",
"label": "Day 7",
"status": "success",
"availability": 100
},
{
"id": "day-8",
"label": "Day 8",
"status": "success",
"availability": 100
},
{
"id": "day-9",
"label": "Day 9",
"status": "success",
"availability": 100
},
{
"id": "day-10",
"label": "Day 10",
"status": "success",
"availability": 100
},
{
"id": "day-11",
"label": "Day 11",
"status": "success",
"availability": 100
},
{
"id": "day-12",
"label": "Day 12",
"status": "success",
"availability": 100
},
{
"id": "day-13",
"label": "Day 13",
"status": "success",
"availability": 100
},
{
"id": "day-14",
"label": "Day 14",
"status": "success",
"availability": 100
},
{
"id": "day-15",
"label": "Day 15",
"status": "success",
"availability": 100
},
{
"id": "day-16",
"label": "Day 16",
"status": "success",
"availability": 100
},
{
"id": "day-17",
"label": "Day 17",
"status": "success",
"availability": 100
},
{
"id": "day-18",
"label": "Day 18",
"status": "success",
"availability": 100
},
{
"id": "day-19",
"label": "Day 19",
"status": "success",
"availability": 100
},
{
"id": "day-20",
"label": "Day 20",
"status": "success",
"availability": 100
},
{
"id": "day-21",
"label": "Day 21",
"status": "success",
"availability": 100
},
{
"id": "day-22",
"label": "Day 22",
"status": "success",
"availability": 100
},
{
"id": "day-23",
"label": "Day 23",
"status": "success",
"availability": 100
},
{
"id": "day-24",
"label": "Day 24",
"status": "success",
"availability": 100
},
{
"id": "day-25",
"label": "Day 25",
"status": "success",
"availability": 100
},
{
"id": "day-26",
"label": "Day 26",
"status": "success",
"availability": 100
},
{
"id": "day-27",
"label": "Day 27",
"status": "success",
"availability": 100
},
{
"id": "day-28",
"label": "Day 28",
"status": "success",
"availability": 100
},
{
"id": "day-29",
"label": "Day 29",
"status": "success",
"availability": 100
},
{
"id": "day-30",
"label": "Day 30",
"status": "success",
"availability": 100
},
{
"id": "day-31",
"label": "Day 31",
"status": "success",
"availability": 100
},
{
"id": "day-32",
"label": "Day 32",
"status": "success",
"availability": 100
},
{
"id": "day-33",
"label": "Day 33",
"status": "success",
"availability": 100
},
{
"id": "day-34",
"label": "Day 34",
"status": "success",
"availability": 100
},
{
"id": "day-35",
"label": "Day 35",
"status": "success",
"availability": 100
},
{
"id": "day-36",
"label": "Day 36",
"status": "success",
"availability": 100
},
{
"id": "day-37",
"label": "Day 37",
"status": "success",
"availability": 100
},
{
"id": "day-38",
"label": "Day 38",
"status": "success",
"availability": 100
},
{
"id": "day-39",
"label": "Day 39",
"status": "success",
"availability": 100
},
{
"id": "day-40",
"label": "Day 40",
"status": "success",
"availability": 100
},
{
"id": "day-41",
"label": "Day 41",
"status": "success",
"availability": 100
},
{
"id": "day-42",
"label": "Day 42",
"status": "success",
"availability": 100
},
{
"id": "day-43",
"label": "Day 43",
"status": "success",
"availability": 100
},
{
"id": "day-44",
"label": "Day 44",
"status": "success",
"availability": 100
},
{
"id": "day-45",
"label": "Day 45",
"status": "success",
"availability": 100
},
{
"id": "day-46",
"label": "Day 46",
"status": "success",
"availability": 100
},
{
"id": "day-47",
"label": "Day 47",
"status": "success",
"availability": 100
},
{
"id": "day-48",
"label": "Day 48",
"status": "success",
"availability": 100
},
{
"id": "day-49",
"label": "Day 49",
"status": "success",
"availability": 100
},
{
"id": "day-50",
"label": "Day 50",
"status": "success",
"availability": 100
},
{
"id": "day-51",
"label": "Day 51",
"status": "success",
"availability": 100
},
{
"id": "day-52",
"label": "Day 52",
"status": "success",
"availability": 100
},
{
"id": "day-53",
"label": "Day 53",
"status": "success",
"availability": 100
},
{
"id": "day-54",
"label": "Day 54",
"status": "warning",
"availability": 99.6
},
{
"id": "day-55",
"label": "Day 55",
"status": "success",
"availability": 100
},
{
"id": "day-56",
"label": "Day 56",
"status": "success",
"availability": 100
},
{
"id": "day-57",
"label": "Day 57",
"status": "success",
"availability": 100
},
{
"id": "day-58",
"label": "Day 58",
"status": "success",
"availability": 100
},
{
"id": "day-59",
"label": "Day 59",
"status": "success",
"availability": 100
},
{
"id": "day-60",
"label": "Day 60",
"status": "success",
"availability": 100
},
{
"id": "day-61",
"label": "Day 61",
"status": "success",
"availability": 100
},
{
"id": "day-62",
"label": "Day 62",
"status": "success",
"availability": 100
},
{
"id": "day-63",
"label": "Day 63",
"status": "success",
"availability": 100
},
{
"id": "day-64",
"label": "Day 64",
"status": "success",
"availability": 100
},
{
"id": "day-65",
"label": "Day 65",
"status": "success",
"availability": 100
},
{
"id": "day-66",
"label": "Day 66",
"status": "success",
"availability": 100
},
{
"id": "day-67",
"label": "Day 67",
"status": "success",
"availability": 100
},
{
"id": "day-68",
"label": "Day 68",
"status": "success",
"availability": 100
},
{
"id": "day-69",
"label": "Day 69",
"status": "success",
"availability": 100
},
{
"id": "day-70",
"label": "Day 70",
"status": "success",
"availability": 100
},
{
"id": "day-71",
"label": "Day 71",
"status": "success",
"availability": 100
},
{
"id": "day-72",
"label": "Day 72",
"status": "success",
"availability": 100
},
{
"id": "day-73",
"label": "Day 73",
"status": "success",
"availability": 100
},
{
"id": "day-74",
"label": "Day 74",
"status": "success",
"availability": 100
},
{
"id": "day-75",
"label": "Day 75",
"status": "success",
"availability": 100
},
{
"id": "day-76",
"label": "Day 76",
"status": "success",
"availability": 100
},
{
"id": "day-77",
"label": "Day 77",
"status": "success",
"availability": 100
},
{
"id": "day-78",
"label": "Day 78",
"status": "success",
"availability": 100
},
{
"id": "day-79",
"label": "Day 79",
"status": "success",
"availability": 100
},
{
"id": "day-80",
"label": "Day 80",
"status": "success",
"availability": 100
},
{
"id": "day-81",
"label": "Day 81",
"status": "success",
"availability": 100
},
{
"id": "day-82",
"label": "Day 82",
"status": "success",
"availability": 100
},
{
"id": "day-83",
"label": "Day 83",
"status": "success",
"availability": 100
},
{
"id": "day-84",
"label": "Day 84",
"status": "success",
"availability": 100
},
{
"id": "day-85",
"label": "Day 85",
"status": "success",
"availability": 100
},
{
"id": "day-86",
"label": "Day 86",
"status": "success",
"availability": 100
},
{
"id": "day-87",
"label": "Day 87",
"status": "success",
"availability": 100
},
{
"id": "day-88",
"label": "Day 88",
"status": "success",
"availability": 100
},
{
"id": "day-89",
"label": "Day 89",
"status": "success",
"availability": 100
},
{
"id": "day-90",
"label": "Day 90",
"status": "success",
"availability": 100
}
]
}
];
<Chart type="uptime" label="Daily service availability" data={sampleChartUptime} />Daily activity
One cell per day. Columns are weeks and rows are weekdays. Zero is an empty cell and a missing day stays empty with a dashed edge. The title sums known values.
import { Chart } from "@/components/ui/chart"
import type { ChartActivityDay } from "@/components/ui/chart"
const sampleChartActivity: ChartActivityDay[] = [
{
"id": "2025-10-13",
"label": "Oct 13, 2025",
"date": "2025-10-13",
"value": 3
},
{
"id": "2025-10-14",
"label": "Oct 14, 2025",
"date": "2025-10-14",
"value": 0
},
{
"id": "2025-10-15",
"label": "Oct 15, 2025",
"date": "2025-10-15",
"value": 0
},
{
"id": "2025-10-16",
"label": "Oct 16, 2025",
"date": "2025-10-16",
"value": 0
},
{
"id": "2025-10-17",
"label": "Oct 17, 2025",
"date": "2025-10-17",
"value": 0
},
{
"id": "2025-10-18",
"label": "Oct 18, 2025",
"date": "2025-10-18",
"value": 0
},
{
"id": "2025-10-19",
"label": "Oct 19, 2025",
"date": "2025-10-19",
"value": 0
},
{
"id": "2025-10-20",
"label": "Oct 20, 2025",
"date": "2025-10-20",
"value": 0
},
{
"id": "2025-10-21",
"label": "Oct 21, 2025",
"date": "2025-10-21",
"value": 0
},
{
"id": "2025-10-22",
"label": "Oct 22, 2025",
"date": "2025-10-22",
"value": 0
},
{
"id": "2025-10-23",
"label": "Oct 23, 2025",
"date": "2025-10-23",
"value": 0
},
{
"id": "2025-10-24",
"label": "Oct 24, 2025",
"date": "2025-10-24",
"value": 0
},
{
"id": "2025-10-25",
"label": "Oct 25, 2025",
"date": "2025-10-25",
"value": 0
},
{
"id": "2025-10-26",
"label": "Oct 26, 2025",
"date": "2025-10-26",
"value": 0
},
{
"id": "2025-10-27",
"label": "Oct 27, 2025",
"date": "2025-10-27",
"value": 0
},
{
"id": "2025-10-28",
"label": "Oct 28, 2025",
"date": "2025-10-28",
"value": 0
},
{
"id": "2025-10-29",
"label": "Oct 29, 2025",
"date": "2025-10-29",
"value": 0
},
{
"id": "2025-10-30",
"label": "Oct 30, 2025",
"date": "2025-10-30",
"value": 1
},
{
"id": "2025-10-31",
"label": "Oct 31, 2025",
"date": "2025-10-31",
"value": 0
},
{
"id": "2025-11-01",
"label": "Nov 1, 2025",
"date": "2025-11-01",
"value": 0
},
{
"id": "2025-11-02",
"label": "Nov 2, 2025",
"date": "2025-11-02",
"value": 0
},
{
"id": "2025-11-03",
"label": "Nov 3, 2025",
"date": "2025-11-03",
"value": 0
},
{
"id": "2025-11-04",
"label": "Nov 4, 2025",
"date": "2025-11-04",
"value": 0
},
{
"id": "2025-11-05",
"label": "Nov 5, 2025",
"date": "2025-11-05",
"value": 0
},
{
"id": "2025-11-06",
"label": "Nov 6, 2025",
"date": "2025-11-06",
"value": 0
},
{
"id": "2025-11-07",
"label": "Nov 7, 2025",
"date": "2025-11-07",
"value": 0
},
{
"id": "2025-11-08",
"label": "Nov 8, 2025",
"date": "2025-11-08",
"value": 0
},
{
"id": "2025-11-09",
"label": "Nov 9, 2025",
"date": "2025-11-09",
"value": 0
},
{
"id": "2025-11-10",
"label": "Nov 10, 2025",
"date": "2025-11-10",
"value": 0
},
{
"id": "2025-11-11",
"label": "Nov 11, 2025",
"date": "2025-11-11",
"value": 3
},
{
"id": "2025-11-12",
"label": "Nov 12, 2025",
"date": "2025-11-12",
"value": 0
},
{
"id": "2025-11-13",
"label": "Nov 13, 2025",
"date": "2025-11-13",
"value": 0
},
{
"id": "2025-11-14",
"label": "Nov 14, 2025",
"date": "2025-11-14",
"value": 0
},
{
"id": "2025-11-15",
"label": "Nov 15, 2025",
"date": "2025-11-15",
"value": 0
},
{
"id": "2025-11-16",
"label": "Nov 16, 2025",
"date": "2025-11-16",
"value": 1
},
{
"id": "2025-11-17",
"label": "Nov 17, 2025",
"date": "2025-11-17",
"value": 0
},
{
"id": "2025-11-18",
"label": "Nov 18, 2025",
"date": "2025-11-18",
"value": 0
},
{
"id": "2025-11-19",
"label": "Nov 19, 2025",
"date": "2025-11-19",
"value": 0
},
{
"id": "2025-11-20",
"label": "Nov 20, 2025",
"date": "2025-11-20",
"value": 0
},
{
"id": "2025-11-21",
"label": "Nov 21, 2025",
"date": "2025-11-21",
"value": 0
},
{
"id": "2025-11-22",
"label": "Nov 22, 2025",
"date": "2025-11-22",
"value": 0
},
{
"id": "2025-11-23",
"label": "Nov 23, 2025",
"date": "2025-11-23",
"value": 0
},
{
"id": "2025-11-24",
"label": "Nov 24, 2025",
"date": "2025-11-24",
"value": 0
},
{
"id": "2025-11-25",
"label": "Nov 25, 2025",
"date": "2025-11-25",
"value": 0
},
{
"id": "2025-11-26",
"label": "Nov 26, 2025",
"date": "2025-11-26",
"value": 0
},
{
"id": "2025-11-27",
"label": "Nov 27, 2025",
"date": "2025-11-27",
"value": 0
},
{
"id": "2025-11-28",
"label": "Nov 28, 2025",
"date": "2025-11-28",
"value": 0
},
{
"id": "2025-11-29",
"label": "Nov 29, 2025",
"date": "2025-11-29",
"value": 0
},
{
"id": "2025-11-30",
"label": "Nov 30, 2025",
"date": "2025-11-30",
"value": 0
},
{
"id": "2025-12-01",
"label": "Dec 1, 2025",
"date": "2025-12-01",
"value": 0
},
{
"id": "2025-12-02",
"label": "Dec 2, 2025",
"date": "2025-12-02",
"value": 0
},
{
"id": "2025-12-03",
"label": "Dec 3, 2025",
"date": "2025-12-03",
"value": 1
},
{
"id": "2025-12-04",
"label": "Dec 4, 2025",
"date": "2025-12-04",
"value": 0
},
{
"id": "2025-12-05",
"label": "Dec 5, 2025",
"date": "2025-12-05",
"value": 0
},
{
"id": "2025-12-06",
"label": "Dec 6, 2025",
"date": "2025-12-06",
"value": 0
},
{
"id": "2025-12-07",
"label": "Dec 7, 2025",
"date": "2025-12-07",
"value": 0
},
{
"id": "2025-12-08",
"label": "Dec 8, 2025",
"date": "2025-12-08",
"value": 0
},
{
"id": "2025-12-09",
"label": "Dec 9, 2025",
"date": "2025-12-09",
"value": 0
},
{
"id": "2025-12-10",
"label": "Dec 10, 2025",
"date": "2025-12-10",
"value": 3
},
{
"id": "2025-12-11",
"label": "Dec 11, 2025",
"date": "2025-12-11",
"value": 0
},
{
"id": "2025-12-12",
"label": "Dec 12, 2025",
"date": "2025-12-12",
"value": 0
},
{
"id": "2025-12-13",
"label": "Dec 13, 2025",
"date": "2025-12-13",
"value": 0
},
{
"id": "2025-12-14",
"label": "Dec 14, 2025",
"date": "2025-12-14",
"value": 0
},
{
"id": "2025-12-15",
"label": "Dec 15, 2025",
"date": "2025-12-15",
"value": 0
},
{
"id": "2025-12-16",
"label": "Dec 16, 2025",
"date": "2025-12-16",
"value": 0
},
{
"id": "2025-12-17",
"label": "Dec 17, 2025",
"date": "2025-12-17",
"value": 0
},
{
"id": "2025-12-18",
"label": "Dec 18, 2025",
"date": "2025-12-18",
"value": 0
},
{
"id": "2025-12-19",
"label": "Dec 19, 2025",
"date": "2025-12-19",
"value": 0
},
{
"id": "2025-12-20",
"label": "Dec 20, 2025",
"date": "2025-12-20",
"value": 1
},
{
"id": "2025-12-21",
"label": "Dec 21, 2025",
"date": "2025-12-21",
"value": 0
},
{
"id": "2025-12-22",
"label": "Dec 22, 2025",
"date": "2025-12-22",
"value": 0
},
{
"id": "2025-12-23",
"label": "Dec 23, 2025",
"date": "2025-12-23",
"value": 0
},
{
"id": "2025-12-24",
"label": "Dec 24, 2025",
"date": "2025-12-24",
"value": 0
},
{
"id": "2025-12-25",
"label": "Dec 25, 2025",
"date": "2025-12-25",
"value": 0
},
{
"id": "2025-12-26",
"label": "Dec 26, 2025",
"date": "2025-12-26",
"value": 0
},
{
"id": "2025-12-27",
"label": "Dec 27, 2025",
"date": "2025-12-27",
"value": 0
},
{
"id": "2025-12-28",
"label": "Dec 28, 2025",
"date": "2025-12-28",
"value": 0
},
{
"id": "2025-12-29",
"label": "Dec 29, 2025",
"date": "2025-12-29",
"value": 0
},
{
"id": "2025-12-30",
"label": "Dec 30, 2025",
"date": "2025-12-30",
"value": 0
},
{
"id": "2025-12-31",
"label": "Dec 31, 2025",
"date": "2025-12-31",
"value": 0
},
{
"id": "2026-01-01",
"label": "Jan 1, 2026",
"date": "2026-01-01",
"value": 0
},
{
"id": "2026-01-02",
"label": "Jan 2, 2026",
"date": "2026-01-02",
"value": 0
},
{
"id": "2026-01-03",
"label": "Jan 3, 2026",
"date": "2026-01-03",
"value": 0
},
{
"id": "2026-01-04",
"label": "Jan 4, 2026",
"date": "2026-01-04",
"value": 0
},
{
"id": "2026-01-05",
"label": "Jan 5, 2026",
"date": "2026-01-05",
"value": 0
},
{
"id": "2026-01-06",
"label": "Jan 6, 2026",
"date": "2026-01-06",
"value": 1
},
{
"id": "2026-01-07",
"label": "Jan 7, 2026",
"date": "2026-01-07",
"value": 0
},
{
"id": "2026-01-08",
"label": "Jan 8, 2026",
"date": "2026-01-08",
"value": 3
},
{
"id": "2026-01-09",
"label": "Jan 9, 2026",
"date": "2026-01-09",
"value": 0
},
{
"id": "2026-01-10",
"label": "Jan 10, 2026",
"date": "2026-01-10",
"value": 0
},
{
"id": "2026-01-11",
"label": "Jan 11, 2026",
"date": "2026-01-11",
"value": 0
},
{
"id": "2026-01-12",
"label": "Jan 12, 2026",
"date": "2026-01-12",
"value": 0
},
{
"id": "2026-01-13",
"label": "Jan 13, 2026",
"date": "2026-01-13",
"value": 0
},
{
"id": "2026-01-14",
"label": "Jan 14, 2026",
"date": "2026-01-14",
"value": 0
},
{
"id": "2026-01-15",
"label": "Jan 15, 2026",
"date": "2026-01-15",
"value": 0
},
{
"id": "2026-01-16",
"label": "Jan 16, 2026",
"date": "2026-01-16",
"value": 0
},
{
"id": "2026-01-17",
"label": "Jan 17, 2026",
"date": "2026-01-17",
"value": 0
},
{
"id": "2026-01-18",
"label": "Jan 18, 2026",
"date": "2026-01-18",
"value": 0
},
{
"id": "2026-01-19",
"label": "Jan 19, 2026",
"date": "2026-01-19",
"value": 0
},
{
"id": "2026-01-20",
"label": "Jan 20, 2026",
"date": "2026-01-20",
"value": 0
},
{
"id": "2026-01-21",
"label": "Jan 21, 2026",
"date": "2026-01-21",
"value": 0
},
{
"id": "2026-01-22",
"label": "Jan 22, 2026",
"date": "2026-01-22",
"value": 0
},
{
"id": "2026-01-23",
"label": "Jan 23, 2026",
"date": "2026-01-23",
"value": 1
},
{
"id": "2026-01-24",
"label": "Jan 24, 2026",
"date": "2026-01-24",
"value": 0
},
{
"id": "2026-01-25",
"label": "Jan 25, 2026",
"date": "2026-01-25",
"value": 0
},
{
"id": "2026-01-26",
"label": "Jan 26, 2026",
"date": "2026-01-26",
"value": 0
},
{
"id": "2026-01-27",
"label": "Jan 27, 2026",
"date": "2026-01-27",
"value": 0
},
{
"id": "2026-01-28",
"label": "Jan 28, 2026",
"date": "2026-01-28",
"value": 0
},
{
"id": "2026-01-29",
"label": "Jan 29, 2026",
"date": "2026-01-29",
"value": 0
},
{
"id": "2026-01-30",
"label": "Jan 30, 2026",
"date": "2026-01-30",
"value": 0
},
{
"id": "2026-01-31",
"label": "Jan 31, 2026",
"date": "2026-01-31",
"value": 0
},
{
"id": "2026-02-01",
"label": "Feb 1, 2026",
"date": "2026-02-01",
"value": 0
},
{
"id": "2026-02-02",
"label": "Feb 2, 2026",
"date": "2026-02-02",
"value": 0
},
{
"id": "2026-02-03",
"label": "Feb 3, 2026",
"date": "2026-02-03",
"value": 0
},
{
"id": "2026-02-04",
"label": "Feb 4, 2026",
"date": "2026-02-04",
"value": 0
},
{
"id": "2026-02-05",
"label": "Feb 5, 2026",
"date": "2026-02-05",
"value": 0
},
{
"id": "2026-02-06",
"label": "Feb 6, 2026",
"date": "2026-02-06",
"value": 3
},
{
"id": "2026-02-07",
"label": "Feb 7, 2026",
"date": "2026-02-07",
"value": 0
},
{
"id": "2026-02-08",
"label": "Feb 8, 2026",
"date": "2026-02-08",
"value": 0
},
{
"id": "2026-02-09",
"label": "Feb 9, 2026",
"date": "2026-02-09",
"value": 1
},
{
"id": "2026-02-10",
"label": "Feb 10, 2026",
"date": "2026-02-10",
"value": 0
},
{
"id": "2026-02-11",
"label": "Feb 11, 2026",
"date": "2026-02-11",
"value": 0
},
{
"id": "2026-02-12",
"label": "Feb 12, 2026",
"date": "2026-02-12",
"value": 0
},
{
"id": "2026-02-13",
"label": "Feb 13, 2026",
"date": "2026-02-13",
"value": 0
},
{
"id": "2026-02-14",
"label": "Feb 14, 2026",
"date": "2026-02-14",
"value": 0
},
{
"id": "2026-02-15",
"label": "Feb 15, 2026",
"date": "2026-02-15",
"value": 0
},
{
"id": "2026-02-16",
"label": "Feb 16, 2026",
"date": "2026-02-16",
"value": 0
},
{
"id": "2026-02-17",
"label": "Feb 17, 2026",
"date": "2026-02-17",
"value": 0
},
{
"id": "2026-02-18",
"label": "Feb 18, 2026",
"date": "2026-02-18",
"value": 0
},
{
"id": "2026-02-19",
"label": "Feb 19, 2026",
"date": "2026-02-19",
"value": 0
},
{
"id": "2026-02-20",
"label": "Feb 20, 2026",
"date": "2026-02-20",
"value": 0
},
{
"id": "2026-02-21",
"label": "Feb 21, 2026",
"date": "2026-02-21",
"value": 0
},
{
"id": "2026-02-22",
"label": "Feb 22, 2026",
"date": "2026-02-22",
"value": 0
},
{
"id": "2026-02-23",
"label": "Feb 23, 2026",
"date": "2026-02-23",
"value": 0
},
{
"id": "2026-02-24",
"label": "Feb 24, 2026",
"date": "2026-02-24",
"value": 0
},
{
"id": "2026-02-25",
"label": "Feb 25, 2026",
"date": "2026-02-25",
"value": 0
},
{
"id": "2026-02-26",
"label": "Feb 26, 2026",
"date": "2026-02-26",
"value": 1
},
{
"id": "2026-02-27",
"label": "Feb 27, 2026",
"date": "2026-02-27",
"value": 0
},
{
"id": "2026-02-28",
"label": "Feb 28, 2026",
"date": "2026-02-28",
"value": 0
},
{
"id": "2026-03-01",
"label": "Mar 1, 2026",
"date": "2026-03-01",
"value": 0
},
{
"id": "2026-03-02",
"label": "Mar 2, 2026",
"date": "2026-03-02",
"value": 0
},
{
"id": "2026-03-03",
"label": "Mar 3, 2026",
"date": "2026-03-03",
"value": 0
},
{
"id": "2026-03-04",
"label": "Mar 4, 2026",
"date": "2026-03-04",
"value": 0
},
{
"id": "2026-03-05",
"label": "Mar 5, 2026",
"date": "2026-03-05",
"value": 0
},
{
"id": "2026-03-06",
"label": "Mar 6, 2026",
"date": "2026-03-06",
"value": 0
},
{
"id": "2026-03-07",
"label": "Mar 7, 2026",
"date": "2026-03-07",
"value": 3
},
{
"id": "2026-03-08",
"label": "Mar 8, 2026",
"date": "2026-03-08",
"value": 0
},
{
"id": "2026-03-09",
"label": "Mar 9, 2026",
"date": "2026-03-09",
"value": 0
},
{
"id": "2026-03-10",
"label": "Mar 10, 2026",
"date": "2026-03-10",
"value": 0
},
{
"id": "2026-03-11",
"label": "Mar 11, 2026",
"date": "2026-03-11",
"value": 0
},
{
"id": "2026-03-12",
"label": "Mar 12, 2026",
"date": "2026-03-12",
"value": 0
},
{
"id": "2026-03-13",
"label": "Mar 13, 2026",
"date": "2026-03-13",
"value": 0
},
{
"id": "2026-03-14",
"label": "Mar 14, 2026",
"date": "2026-03-14",
"value": 0
},
{
"id": "2026-03-15",
"label": "Mar 15, 2026",
"date": "2026-03-15",
"value": 1
},
{
"id": "2026-03-16",
"label": "Mar 16, 2026",
"date": "2026-03-16",
"value": 0
},
{
"id": "2026-03-17",
"label": "Mar 17, 2026",
"date": "2026-03-17",
"value": 0
},
{
"id": "2026-03-18",
"label": "Mar 18, 2026",
"date": "2026-03-18",
"value": 0
},
{
"id": "2026-03-19",
"label": "Mar 19, 2026",
"date": "2026-03-19",
"value": 0
},
{
"id": "2026-03-20",
"label": "Mar 20, 2026",
"date": "2026-03-20",
"value": 0
},
{
"id": "2026-03-21",
"label": "Mar 21, 2026",
"date": "2026-03-21",
"value": 0
},
{
"id": "2026-03-22",
"label": "Mar 22, 2026",
"date": "2026-03-22",
"value": 0
},
{
"id": "2026-03-23",
"label": "Mar 23, 2026",
"date": "2026-03-23",
"value": 0
},
{
"id": "2026-03-24",
"label": "Mar 24, 2026",
"date": "2026-03-24",
"value": 0
},
{
"id": "2026-03-25",
"label": "Mar 25, 2026",
"date": "2026-03-25",
"value": 0
},
{
"id": "2026-03-26",
"label": "Mar 26, 2026",
"date": "2026-03-26",
"value": 0
},
{
"id": "2026-03-27",
"label": "Mar 27, 2026",
"date": "2026-03-27",
"value": 0
},
{
"id": "2026-03-28",
"label": "Mar 28, 2026",
"date": "2026-03-28",
"value": 0
},
{
"id": "2026-03-29",
"label": "Mar 29, 2026",
"date": "2026-03-29",
"value": 0
},
{
"id": "2026-03-30",
"label": "Mar 30, 2026",
"date": "2026-03-30",
"value": 0
},
{
"id": "2026-03-31",
"label": "Mar 31, 2026",
"date": "2026-03-31",
"value": 0
},
{
"id": "2026-04-01",
"label": "Apr 1, 2026",
"date": "2026-04-01",
"value": 1
},
{
"id": "2026-04-02",
"label": "Apr 2, 2026",
"date": "2026-04-02",
"value": 0
},
{
"id": "2026-04-03",
"label": "Apr 3, 2026",
"date": "2026-04-03",
"value": 0
},
{
"id": "2026-04-04",
"label": "Apr 4, 2026",
"date": "2026-04-04",
"value": 0
},
{
"id": "2026-04-05",
"label": "Apr 5, 2026",
"date": "2026-04-05",
"value": 3
},
{
"id": "2026-04-06",
"label": "Apr 6, 2026",
"date": "2026-04-06",
"value": 0
},
{
"id": "2026-04-07",
"label": "Apr 7, 2026",
"date": "2026-04-07",
"value": 0
},
{
"id": "2026-04-08",
"label": "Apr 8, 2026",
"date": "2026-04-08",
"value": 0
},
{
"id": "2026-04-09",
"label": "Apr 9, 2026",
"date": "2026-04-09",
"value": 0
},
{
"id": "2026-04-10",
"label": "Apr 10, 2026",
"date": "2026-04-10",
"value": 0
},
{
"id": "2026-04-11",
"label": "Apr 11, 2026",
"date": "2026-04-11",
"value": 0
},
{
"id": "2026-04-12",
"label": "Apr 12, 2026",
"date": "2026-04-12",
"value": 0
},
{
"id": "2026-04-13",
"label": "Apr 13, 2026",
"date": "2026-04-13",
"value": 0
},
{
"id": "2026-04-14",
"label": "Apr 14, 2026",
"date": "2026-04-14",
"value": 0
},
{
"id": "2026-04-15",
"label": "Apr 15, 2026",
"date": "2026-04-15",
"value": 0
},
{
"id": "2026-04-16",
"label": "Apr 16, 2026",
"date": "2026-04-16",
"value": 0
},
{
"id": "2026-04-17",
"label": "Apr 17, 2026",
"date": "2026-04-17",
"value": 0
},
{
"id": "2026-04-18",
"label": "Apr 18, 2026",
"date": "2026-04-18",
"value": 1
},
{
"id": "2026-04-19",
"label": "Apr 19, 2026",
"date": "2026-04-19",
"value": 0
},
{
"id": "2026-04-20",
"label": "Apr 20, 2026",
"date": "2026-04-20",
"value": 0
},
{
"id": "2026-04-21",
"label": "Apr 21, 2026",
"date": "2026-04-21",
"value": 0
},
{
"id": "2026-04-22",
"label": "Apr 22, 2026",
"date": "2026-04-22",
"value": 0
},
{
"id": "2026-04-23",
"label": "Apr 23, 2026",
"date": "2026-04-23",
"value": 0
},
{
"id": "2026-04-24",
"label": "Apr 24, 2026",
"date": "2026-04-24",
"value": 0
},
{
"id": "2026-04-25",
"label": "Apr 25, 2026",
"date": "2026-04-25",
"value": 0
},
{
"id": "2026-04-26",
"label": "Apr 26, 2026",
"date": "2026-04-26",
"value": 0
},
{
"id": "2026-04-27",
"label": "Apr 27, 2026",
"date": "2026-04-27",
"value": 0
},
{
"id": "2026-04-28",
"label": "Apr 28, 2026",
"date": "2026-04-28",
"value": 0
},
{
"id": "2026-04-29",
"label": "Apr 29, 2026",
"date": "2026-04-29",
"value": 0
},
{
"id": "2026-04-30",
"label": "Apr 30, 2026",
"date": "2026-04-30",
"value": 0
},
{
"id": "2026-05-01",
"label": "May 1, 2026",
"date": "2026-05-01",
"value": 0
},
{
"id": "2026-05-02",
"label": "May 2, 2026",
"date": "2026-05-02",
"value": 0
},
{
"id": "2026-05-03",
"label": "May 3, 2026",
"date": "2026-05-03",
"value": 0
},
{
"id": "2026-05-04",
"label": "May 4, 2026",
"date": "2026-05-04",
"value": 3
},
{
"id": "2026-05-05",
"label": "May 5, 2026",
"date": "2026-05-05",
"value": 1
},
{
"id": "2026-05-06",
"label": "May 6, 2026",
"date": "2026-05-06",
"value": 0
},
{
"id": "2026-05-07",
"label": "May 7, 2026",
"date": "2026-05-07",
"value": 0
},
{
"id": "2026-05-08",
"label": "May 8, 2026",
"date": "2026-05-08",
"value": 0
},
{
"id": "2026-05-09",
"label": "May 9, 2026",
"date": "2026-05-09",
"value": 0
},
{
"id": "2026-05-10",
"label": "May 10, 2026",
"date": "2026-05-10",
"value": 0
},
{
"id": "2026-05-11",
"label": "May 11, 2026",
"date": "2026-05-11",
"value": 0
},
{
"id": "2026-05-12",
"label": "May 12, 2026",
"date": "2026-05-12",
"value": 0
},
{
"id": "2026-05-13",
"label": "May 13, 2026",
"date": "2026-05-13",
"value": 0
},
{
"id": "2026-05-14",
"label": "May 14, 2026",
"date": "2026-05-14",
"value": 0
},
{
"id": "2026-05-15",
"label": "May 15, 2026",
"date": "2026-05-15",
"value": 0
},
{
"id": "2026-05-16",
"label": "May 16, 2026",
"date": "2026-05-16",
"value": 3
},
{
"id": "2026-05-17",
"label": "May 17, 2026",
"date": "2026-05-17",
"value": 2
},
{
"id": "2026-05-18",
"label": "May 18, 2026",
"date": "2026-05-18",
"value": 1
},
{
"id": "2026-05-19",
"label": "May 19, 2026",
"date": "2026-05-19",
"value": 1
},
{
"id": "2026-05-20",
"label": "May 20, 2026",
"date": "2026-05-20",
"value": 1
},
{
"id": "2026-05-21",
"label": "May 21, 2026",
"date": "2026-05-21",
"value": 2
},
{
"id": "2026-05-22",
"label": "May 22, 2026",
"date": "2026-05-22",
"value": 2
},
{
"id": "2026-05-23",
"label": "May 23, 2026",
"date": "2026-05-23",
"value": 3
},
{
"id": "2026-05-24",
"label": "May 24, 2026",
"date": "2026-05-24",
"value": 4
},
{
"id": "2026-05-25",
"label": "May 25, 2026",
"date": "2026-05-25",
"value": 4
},
{
"id": "2026-05-26",
"label": "May 26, 2026",
"date": "2026-05-26",
"value": 4
},
{
"id": "2026-05-27",
"label": "May 27, 2026",
"date": "2026-05-27",
"value": 3
},
{
"id": "2026-05-28",
"label": "May 28, 2026",
"date": "2026-05-28",
"value": 2
},
{
"id": "2026-05-29",
"label": "May 29, 2026",
"date": "2026-05-29",
"value": 1
},
{
"id": "2026-05-30",
"label": "May 30, 2026",
"date": "2026-05-30",
"value": 0
},
{
"id": "2026-05-31",
"label": "May 31, 2026",
"date": "2026-05-31",
"value": 0
},
{
"id": "2026-06-01",
"label": "Jun 1, 2026",
"date": "2026-06-01",
"value": 0
},
{
"id": "2026-06-02",
"label": "Jun 2, 2026",
"date": "2026-06-02",
"value": 0
},
{
"id": "2026-06-03",
"label": "Jun 3, 2026",
"date": "2026-06-03",
"value": 0
},
{
"id": "2026-06-04",
"label": "Jun 4, 2026",
"date": "2026-06-04",
"value": 0
},
{
"id": "2026-06-05",
"label": "Jun 5, 2026",
"date": "2026-06-05",
"value": 0
},
{
"id": "2026-06-06",
"label": "Jun 6, 2026",
"date": "2026-06-06",
"value": 1
},
{
"id": "2026-06-07",
"label": "Jun 7, 2026",
"date": "2026-06-07",
"value": 2
},
{
"id": "2026-06-08",
"label": "Jun 8, 2026",
"date": "2026-06-08",
"value": 2
},
{
"id": "2026-06-09",
"label": "Jun 9, 2026",
"date": "2026-06-09",
"value": 3
},
{
"id": "2026-06-10",
"label": "Jun 10, 2026",
"date": "2026-06-10",
"value": 2
},
{
"id": "2026-06-11",
"label": "Jun 11, 2026",
"date": "2026-06-11",
"value": 2
},
{
"id": "2026-06-12",
"label": "Jun 12, 2026",
"date": "2026-06-12",
"value": 1
},
{
"id": "2026-06-13",
"label": "Jun 13, 2026",
"date": "2026-06-13",
"value": 1
},
{
"id": "2026-06-14",
"label": "Jun 14, 2026",
"date": "2026-06-14",
"value": 1
},
{
"id": "2026-06-15",
"label": "Jun 15, 2026",
"date": "2026-06-15",
"value": 1
},
{
"id": "2026-06-16",
"label": "Jun 16, 2026",
"date": "2026-06-16",
"value": 1
},
{
"id": "2026-06-17",
"label": "Jun 17, 2026",
"date": "2026-06-17",
"value": 2
},
{
"id": "2026-06-18",
"label": "Jun 18, 2026",
"date": "2026-06-18",
"value": 3
},
{
"id": "2026-06-19",
"label": "Jun 19, 2026",
"date": "2026-06-19",
"value": 4
},
{
"id": "2026-06-20",
"label": "Jun 20, 2026",
"date": "2026-06-20",
"value": 5
},
{
"id": "2026-06-21",
"label": "Jun 21, 2026",
"date": "2026-06-21",
"value": 6
},
{
"id": "2026-06-22",
"label": "Jun 22, 2026",
"date": "2026-06-22",
"value": 7
},
{
"id": "2026-06-23",
"label": "Jun 23, 2026",
"date": "2026-06-23",
"value": 7
},
{
"id": "2026-06-24",
"label": "Jun 24, 2026",
"date": "2026-06-24",
"value": 6
},
{
"id": "2026-06-25",
"label": "Jun 25, 2026",
"date": "2026-06-25",
"value": 6
},
{
"id": "2026-06-26",
"label": "Jun 26, 2026",
"date": "2026-06-26",
"value": 5
},
{
"id": "2026-06-27",
"label": "Jun 27, 2026",
"date": "2026-06-27",
"value": 4
},
{
"id": "2026-06-28",
"label": "Jun 28, 2026",
"date": "2026-06-28",
"value": 3
},
{
"id": "2026-06-29",
"label": "Jun 29, 2026",
"date": "2026-06-29",
"value": 3
},
{
"id": "2026-06-30",
"label": "Jun 30, 2026",
"date": "2026-06-30",
"value": 3
},
{
"id": "2026-07-01",
"label": "Jul 1, 2026",
"date": "2026-07-01",
"value": 3
},
{
"id": "2026-07-02",
"label": "Jul 2, 2026",
"date": "2026-07-02",
"value": 4
},
{
"id": "2026-07-03",
"label": "Jul 3, 2026",
"date": "2026-07-03",
"value": 4
},
{
"id": "2026-07-04",
"label": "Jul 4, 2026",
"date": "2026-07-04",
"value": 5
},
{
"id": "2026-07-05",
"label": "Jul 5, 2026",
"date": "2026-07-05",
"value": 5
},
{
"id": "2026-07-06",
"label": "Jul 6, 2026",
"date": "2026-07-06",
"value": 5
},
{
"id": "2026-07-07",
"label": "Jul 7, 2026",
"date": "2026-07-07",
"value": 5
},
{
"id": "2026-07-08",
"label": "Jul 8, 2026",
"date": "2026-07-08",
"value": 4
},
{
"id": "2026-07-09",
"label": "Jul 9, 2026",
"date": "2026-07-09",
"value": 3
},
{
"id": "2026-07-10",
"label": "Jul 10, 2026",
"date": "2026-07-10",
"value": 2
},
{
"id": "2026-07-11",
"label": "Jul 11, 2026",
"date": "2026-07-11",
"value": 1
},
{
"id": "2026-07-12",
"label": "Jul 12, 2026",
"date": "2026-07-12",
"value": 0
},
{
"id": "2026-07-13",
"label": "Jul 13, 2026",
"date": "2026-07-13",
"value": 0
},
{
"id": "2026-07-14",
"label": "Jul 14, 2026",
"date": "2026-07-14",
"value": 0
},
{
"id": "2026-07-15",
"label": "Jul 15, 2026",
"date": "2026-07-15",
"value": 1
},
{
"id": "2026-07-16",
"label": "Jul 16, 2026",
"date": "2026-07-16",
"value": 2
},
{
"id": "2026-07-17",
"label": "Jul 17, 2026",
"date": "2026-07-17",
"value": 3
},
{
"id": "2026-07-18",
"label": "Jul 18, 2026",
"date": "2026-07-18",
"value": 3
},
{
"id": "2026-07-19",
"label": "Jul 19, 2026",
"date": "2026-07-19",
"value": 4
},
{
"id": "2026-07-20",
"label": "Jul 20, 2026",
"date": "2026-07-20",
"value": 5
},
{
"id": "2026-07-21",
"label": "Jul 21, 2026",
"date": "2026-07-21",
"value": 5
},
{
"id": "2026-07-22",
"label": "Jul 22, 2026",
"date": "2026-07-22",
"value": 4
},
{
"id": "2026-07-23",
"label": "Jul 23, 2026",
"date": "2026-07-23",
"value": 4
},
{
"id": "2026-07-24",
"label": "Jul 24, 2026",
"date": "2026-07-24",
"value": 3
},
{
"id": "2026-07-25",
"label": "Jul 25, 2026",
"date": "2026-07-25",
"value": 3
},
{
"id": "2026-07-26",
"label": "Jul 26, 2026",
"date": "2026-07-26",
"value": 3
},
{
"id": "2026-07-27",
"label": "Jul 27, 2026",
"date": "2026-07-27",
"value": 3
},
{
"id": "2026-07-28",
"label": "Jul 28, 2026",
"date": "2026-07-28",
"value": 3
},
{
"id": "2026-07-29",
"label": "Jul 29, 2026",
"date": "2026-07-29",
"value": 4
},
{
"id": "2026-07-30",
"label": "Jul 30, 2026",
"date": "2026-07-30",
"value": 5
},
{
"id": "2026-07-31",
"label": "Jul 31, 2026",
"date": "2026-07-31",
"value": 7
},
{
"id": "2026-08-01",
"label": "Aug 1, 2026",
"date": "2026-08-01",
"value": 8
},
{
"id": "2026-08-02",
"label": "Aug 2, 2026",
"date": "2026-08-02",
"value": 8
},
{
"id": "2026-08-03",
"label": "Aug 3, 2026",
"date": "2026-08-03",
"value": 9
},
{
"id": "2026-08-04",
"label": "Aug 4, 2026",
"date": "2026-08-04",
"value": 8
},
{
"id": "2026-08-05",
"label": "Aug 5, 2026",
"date": "2026-08-05",
"value": 8
},
{
"id": "2026-08-06",
"label": "Aug 6, 2026",
"date": "2026-08-06",
"value": 7
},
{
"id": "2026-08-07",
"label": "Aug 7, 2026",
"date": "2026-08-07",
"value": 6
},
{
"id": "2026-08-08",
"label": "Aug 8, 2026",
"date": "2026-08-08",
"value": 5
},
{
"id": "2026-08-09",
"label": "Aug 9, 2026",
"date": "2026-08-09",
"value": 5
},
{
"id": "2026-08-10",
"label": "Aug 10, 2026",
"date": "2026-08-10",
"value": 4
},
{
"id": "2026-08-11",
"label": "Aug 11, 2026",
"date": "2026-08-11",
"value": 5
},
{
"id": "2026-08-12",
"label": "Aug 12, 2026",
"date": "2026-08-12",
"value": 5
},
{
"id": "2026-08-13",
"label": "Aug 13, 2026",
"date": "2026-08-13",
"value": 6
},
{
"id": "2026-08-14",
"label": "Aug 14, 2026",
"date": "2026-08-14",
"value": 6
},
{
"id": "2026-08-15",
"label": "Aug 15, 2026",
"date": "2026-08-15",
"value": 7
},
{
"id": "2026-08-16",
"label": "Aug 16, 2026",
"date": "2026-08-16",
"value": 7
},
{
"id": "2026-08-17",
"label": "Aug 17, 2026",
"date": "2026-08-17",
"value": 7
},
{
"id": "2026-08-18",
"label": "Aug 18, 2026",
"date": "2026-08-18",
"value": 6
},
{
"id": "2026-08-19",
"label": "Aug 19, 2026",
"date": "2026-08-19",
"value": 5
},
{
"id": "2026-08-20",
"label": "Aug 20, 2026",
"date": "2026-08-20",
"value": 4
},
{
"id": "2026-08-21",
"label": "Aug 21, 2026",
"date": "2026-08-21",
"value": 3
},
{
"id": "2026-08-22",
"label": "Aug 22, 2026",
"date": "2026-08-22",
"value": 2
},
{
"id": "2026-08-23",
"label": "Aug 23, 2026",
"date": "2026-08-23",
"value": 2
},
{
"id": "2026-08-24",
"label": "Aug 24, 2026",
"date": "2026-08-24",
"value": 2
},
{
"id": "2026-08-25",
"label": "Aug 25, 2026",
"date": "2026-08-25",
"value": 2
},
{
"id": "2026-08-26",
"label": "Aug 26, 2026",
"date": "2026-08-26",
"value": 3
},
{
"id": "2026-08-27",
"label": "Aug 27, 2026",
"date": "2026-08-27",
"value": 4
},
{
"id": "2026-08-28",
"label": "Aug 28, 2026",
"date": "2026-08-28",
"value": 5
},
{
"id": "2026-08-29",
"label": "Aug 29, 2026",
"date": "2026-08-29",
"value": 6
},
{
"id": "2026-08-30",
"label": "Aug 30, 2026",
"date": "2026-08-30",
"value": 6
},
{
"id": "2026-08-31",
"label": "Aug 31, 2026",
"date": "2026-08-31",
"value": 7
},
{
"id": "2026-09-01",
"label": "Sep 1, 2026",
"date": "2026-09-01",
"value": 6
},
{
"id": "2026-09-02",
"label": "Sep 2, 2026",
"date": "2026-09-02",
"value": 6
},
{
"id": "2026-09-03",
"label": "Sep 3, 2026",
"date": "2026-09-03",
"value": 5
},
{
"id": "2026-09-04",
"label": "Sep 4, 2026",
"date": "2026-09-04",
"value": 5
},
{
"id": "2026-09-05",
"label": "Sep 5, 2026",
"date": "2026-09-05",
"value": 5
},
{
"id": "2026-09-06",
"label": "Sep 6, 2026",
"date": "2026-09-06",
"value": 5
},
{
"id": "2026-09-07",
"label": "Sep 7, 2026",
"date": "2026-09-07",
"value": 5
},
{
"id": "2026-09-08",
"label": "Sep 8, 2026",
"date": "2026-09-08",
"value": 6
},
{
"id": "2026-09-09",
"label": "Sep 9, 2026",
"date": "2026-09-09",
"value": 7
},
{
"id": "2026-09-10",
"label": "Sep 10, 2026",
"date": "2026-09-10",
"value": 8
},
{
"id": "2026-09-11",
"label": "Sep 11, 2026",
"date": "2026-09-11",
"value": 9
},
{
"id": "2026-09-12",
"label": "Sep 12, 2026",
"date": "2026-09-12",
"value": 10
},
{
"id": "2026-09-13",
"label": "Sep 13, 2026",
"date": "2026-09-13",
"value": 10
},
{
"id": "2026-09-14",
"label": "Sep 14, 2026",
"date": "2026-09-14",
"value": 10
},
{
"id": "2026-09-15",
"label": "Sep 15, 2026",
"date": "2026-09-15",
"value": 10
},
{
"id": "2026-09-16",
"label": "Sep 16, 2026",
"date": "2026-09-16",
"value": 9
},
{
"id": "2026-09-17",
"label": "Sep 17, 2026",
"date": "2026-09-17",
"value": 8
},
{
"id": "2026-09-18",
"label": "Sep 18, 2026",
"date": "2026-09-18",
"value": 7
},
{
"id": "2026-09-19",
"label": "Sep 19, 2026",
"date": "2026-09-19",
"value": 7
},
{
"id": "2026-09-20",
"label": "Sep 20, 2026",
"date": "2026-09-20",
"value": 6
},
{
"id": "2026-09-21",
"label": "Sep 21, 2026",
"date": "2026-09-21",
"value": 6
},
{
"id": "2026-09-22",
"label": "Sep 22, 2026",
"date": "2026-09-22",
"value": 6
},
{
"id": "2026-09-23",
"label": "Sep 23, 2026",
"date": "2026-09-23",
"value": 7
},
{
"id": "2026-09-24",
"label": "Sep 24, 2026",
"date": "2026-09-24",
"value": 8
},
{
"id": "2026-09-25",
"label": "Sep 25, 2026",
"date": "2026-09-25",
"value": 8
},
{
"id": "2026-09-26",
"label": "Sep 26, 2026",
"date": "2026-09-26",
"value": 9
},
{
"id": "2026-09-27",
"label": "Sep 27, 2026",
"date": "2026-09-27",
"value": 9
},
{
"id": "2026-09-28",
"label": "Sep 28, 2026",
"date": "2026-09-28",
"value": 8
},
{
"id": "2026-09-29",
"label": "Sep 29, 2026",
"date": "2026-09-29",
"value": 7
},
{
"id": "2026-09-30",
"label": "Sep 30, 2026",
"date": "2026-09-30",
"value": 6
},
{
"id": "2026-10-01",
"label": "Oct 1, 2026",
"date": "2026-10-01",
"value": 5
},
{
"id": "2026-10-02",
"label": "Oct 2, 2026",
"date": "2026-10-02",
"value": 4
},
{
"id": "2026-10-03",
"label": "Oct 3, 2026",
"date": "2026-10-03",
"value": 4
},
{
"id": "2026-10-04",
"label": "Oct 4, 2026",
"date": "2026-10-04",
"value": 3
},
{
"id": "2026-10-05",
"label": "Oct 5, 2026",
"date": "2026-10-05",
"value": 4
},
{
"id": "2026-10-06",
"label": "Oct 6, 2026",
"date": "2026-10-06",
"value": 4
},
{
"id": "2026-10-07",
"label": "Oct 7, 2026",
"date": "2026-10-07",
"value": 5
},
{
"id": "2026-10-08",
"label": "Oct 8, 2026",
"date": "2026-10-08",
"value": 6
},
{
"id": "2026-10-09",
"label": "Oct 9, 2026",
"date": "2026-10-09",
"value": 7
},
{
"id": "2026-10-10",
"label": "Oct 10, 2026",
"date": "2026-10-10",
"value": 8
},
{
"id": "2026-10-11",
"label": "Oct 11, 2026",
"date": "2026-10-11",
"value": 8
},
{
"id": "2026-10-12",
"label": "Oct 12, 2026",
"date": "2026-10-12",
"value": 8
},
{
"id": "2026-10-13",
"label": "Oct 13, 2026",
"date": "2026-10-13",
"value": 8
},
{
"id": "2026-10-14",
"label": "Oct 14, 2026",
"date": "2026-10-14",
"value": 8
},
{
"id": "2026-10-15",
"label": "Oct 15, 2026",
"date": "2026-10-15",
"value": 7
},
{
"id": "2026-10-16",
"label": "Oct 16, 2026",
"date": "2026-10-16",
"value": 7
},
{
"id": "2026-10-17",
"label": "Oct 17, 2026",
"date": "2026-10-17",
"value": 7
},
{
"id": "2026-10-18",
"label": "Oct 18, 2026",
"date": "2026-10-18",
"value": 7
}
];
<Chart type="activity" label="events in the last year" data={sampleChartActivity} />Current and prior periods
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleComparisonSeries: ChartSeries[] = [
{
"id": "current",
"label": "Current period"
},
{
"id": "prior",
"label": "Prior period",
"comparison": true
}
];
const sampleComparisonRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"current": 280,
"prior": 240
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"current": 340,
"prior": 270
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"current": 310,
"prior": 300
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"current": 420,
"prior": 330
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"current": 390,
"prior": 360
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"current": 480,
"prior": 390
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"current": 520,
"prior": 420
}
}
];
<Chart type="line" label="Current and prior activity" data={sampleComparisonRows} series={sampleComparisonSeries} />Missing values
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleMissingRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": null,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="line" label="Activity with an observation gap" data={sampleMissingRows} series={sampleChartSeries} />Signed values
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartRow, ChartSeries } from "@/components/ui/chart"
const sampleSignedRows: ChartRow[] = [
{
"id": "a",
"label": "North",
"x": 0,
"values": {
"visits": 80,
"readers": -30
}
},
{
"id": "b",
"label": "South",
"x": 1,
"values": {
"visits": -40,
"readers": 65
}
},
{
"id": "c",
"label": "East",
"x": 2,
"values": {
"visits": 50,
"readers": -20
}
}
];
const sampleSignedSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
}
];
<Chart type="bar" label="Regional net changes" data={sampleSignedRows} series={sampleSignedSeries} layout="stacked" />Empty total
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartItem } from "@/components/ui/chart"
const sampleZeroParts: ChartItem[] = [
{
"id": "pending",
"label": "Awaiting activity",
"value": 0
}
];
<Chart type="donut" label="Activity awaiting observations" data={sampleZeroParts} />Eight series
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleEightSeries: ChartSeries[] = [
{
"id": "series-0",
"label": "Group 1"
},
{
"id": "series-1",
"label": "Group 2"
},
{
"id": "series-2",
"label": "Group 3"
},
{
"id": "series-3",
"label": "Group 4"
},
{
"id": "series-4",
"label": "Group 5"
},
{
"id": "series-5",
"label": "Group 6"
},
{
"id": "series-6",
"label": "Group 7"
},
{
"id": "series-7",
"label": "Group 8"
}
];
const sampleEightRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"series-0": 20,
"series-1": 35,
"series-2": 50,
"series-3": 65,
"series-4": 80,
"series-5": 95,
"series-6": 110,
"series-7": 125
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"series-0": 23,
"series-1": 39,
"series-2": 55,
"series-3": 71,
"series-4": 87,
"series-5": 103,
"series-6": 119,
"series-7": 135
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"series-0": 26,
"series-1": 43,
"series-2": 60,
"series-3": 77,
"series-4": 94,
"series-5": 111,
"series-6": 128,
"series-7": 145
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"series-0": 29,
"series-1": 47,
"series-2": 65,
"series-3": 83,
"series-4": 101,
"series-5": 119,
"series-6": 137,
"series-7": 155
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"series-0": 32,
"series-1": 51,
"series-2": 70,
"series-3": 89,
"series-4": 108,
"series-5": 127,
"series-6": 146,
"series-7": 125
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"series-0": 35,
"series-1": 55,
"series-2": 75,
"series-3": 95,
"series-4": 115,
"series-5": 95,
"series-6": 115,
"series-7": 135
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"series-0": 38,
"series-1": 59,
"series-2": 80,
"series-3": 101,
"series-4": 82,
"series-5": 103,
"series-6": 124,
"series-7": 145
}
}
];
<Chart type="line" label="Eight labeled groups" data={sampleEightRows} series={sampleEightSeries} />Pending refresh
Original illustrative data stays visible while only the plot dims.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleChartRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": 420,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
<Chart type="line" label="Activity being refreshed" data={sampleChartRows} series={sampleChartSeries} pending />Localized labels
Original illustrative data. Copy includes the complete local setup.
import { Chart } from "@/components/ui/chart"
import type { ChartSeries, ChartRow, ChartLabels } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
{
"id": "visits",
"label": "Visits"
},
{
"id": "readers",
"label": "Readers"
},
{
"id": "members",
"label": "Members"
}
];
const sampleMissingRows: ChartRow[] = [
{
"id": "mon",
"label": "Monday",
"x": 1791763200000,
"values": {
"visits": 280,
"readers": 180,
"members": 90
}
},
{
"id": "tue",
"label": "Tuesday",
"x": 1791849600000,
"values": {
"visits": 340,
"readers": 220,
"members": 110
}
},
{
"id": "wed",
"label": "Wednesday",
"x": 1791936000000,
"values": {
"visits": 310,
"readers": 200,
"members": 120
}
},
{
"id": "thu",
"label": "Thursday",
"x": 1792022400000,
"values": {
"visits": null,
"readers": 270,
"members": 150
}
},
{
"id": "fri",
"label": "Friday",
"x": 1792108800000,
"values": {
"visits": 390,
"readers": 260,
"members": 170
}
},
{
"id": "sat",
"label": "Saturday",
"x": 1792195200000,
"values": {
"visits": 480,
"readers": 310,
"members": 190
}
},
{
"id": "sun",
"label": "Sunday",
"x": 1792281600000,
"values": {
"visits": 520,
"readers": 340,
"members": 220
}
}
];
const sampleChartLabels: Partial<ChartLabels> = {
"viewData": "Open values",
"hideData": "Close values",
"missing": "Not measured",
"unobserved": "Not yet observed"
};
<Chart type="line" label="Activity with custom labels" data={sampleMissingRows} series={sampleChartSeries} locale="en-GB" labels={sampleChartLabels} />Do and don't
Do
- Use the ten discriminated data contracts. Keep ids stable and row labels complete.
- Use series in chartPalette order; mark comparisons with comparison=true and supply direct labels or patterns for more than four series.
- Put values and labels on neutral surfaces. Compose metrics with the full DataTrend block and goals with Progress.
- Keep prior content while refreshing. Use a delayed Skeleton only for a first load.
- Label sample datasets as illustrative and derive every chart, metric and table on a screen from the same rows.
Don't
- Do not pick arbitrary hues, apply color alpha, add opacity steps or animate chart drawing.
- Do not connect across missing values, clamp invalid facts or treat null as zero.
- Do not average unequal-duration availability samples or count status cells as uptime.
- Do not imply that cohort heat bands are success thresholds.
- Do not add a second Card surface around a chart already inside a Card.
Props
| Name | Type | Values | Default | Description |
|---|---|---|---|---|
| type required | enum | line | area | bar | sparkline | composition | donut | funnel | timeline | cohort | uptime | activity | - | Required discriminant. Each type accepts only its own data shape. |
| label required | string | - | - | Required accessible chart name. |
| description | string | - | - | Optional context associated with the chart. |
| data required | ChartRow[] | ChartItem[] | ChartRange[] | ChartCohortRow[] | ChartUptimeRow[] | ChartActivityDay[] | - | - | Ordered local data matching type. Null preserves missing or unobserved meaning; invalid values are reported. |
| series | ChartSeries[] | - | - | Required for line, area, bar and sparkline. Stable ids map to values; comparison adds a dashed stroke. Sparkline takes one series. |
| height | number | - | - | Plot height in CSS pixels. Defaults to 256, sparkline 48, compact bar 32. Timeline, cohort, uptime and activity size to their rows by default; a height fixes the timeline and caps cohort, uptime and activity, which then scroll. |
| legend | boolean | - | true | Show the series or status legend. Defaults true except sparkline and single-series bar. Composition, donut and funnel keep direct labels without a duplicate legend. |
| interactive | boolean | - | true | Enable pointer, touch and keyboard inspection. Defaults true except sparkline. |
| pending | boolean | - | false | Retain current data, mark the figure busy and dim only the plot. |
| table | enum | toggle | visible | hidden | toggle | Toggle reveals the semantic data view. Hidden keeps the table accessible with visually hidden presentation. Sparkline defaults hidden. |
| locale | string | - | en | Explicit number-formatting locale shared by server and client. |
| labels | Partial<ChartLabels> | - | - | Override viewData, hideData, loading, empty, missing, unobserved, invalid, noSeries, zeroTotal, value, total, cohortSize, conversion, share, coverage, success, warning, danger, unknown, neutral, start, end, status, point, less and more text. Raw values use formatValue; derived percentages always use locale-aware percentage formatting. |
| formatValue | (value: number, id: string) => string | - | - | Format a finite number and stable series or item id without changing geometry. |
| xScale | enum | category | linear | time | category | Cartesian axis spacing. Numeric and time modes require finite, strictly ascending x values; time uses epoch milliseconds. Without formatX, time positions show a short UTC date. |
| formatX | (value: number) => string | - | - | Format numeric or time ticks for Cartesian charts and timeline; full row labels remain available. |
| domain | [number, number] | - | - | Cartesian finite ascending value bounds containing every value. Bar domains must include zero. |
| axes | boolean | - | true | Show Cartesian axes. Defaults true except sparkline and compact bar. |
| grid | boolean | - | true | Show Cartesian grid lines. Defaults true except sparkline and compact bar. |
| hiddenSeries | string[] | - | - | Controlled hidden Cartesian series ids. Palette positions remain stable. |
| defaultHiddenSeries | string[] | - | - | Uncontrolled initial hidden Cartesian series ids. |
| onHiddenSeriesChange | (ids: string[]) => void | - | - | Receive the hidden series ids after a legend action. |
| stack | enum | none | normal | none | Area only: overlaid independent series or a nonnegative summed stack. Null breaks the stack at that row. |
| orientation | enum | vertical | horizontal | vertical | Bar only: vertical or horizontal bars. |
| layout | enum | grouped | stacked | percentage | grouped | Bar only: grouped, signed stacked or nonnegative percentage composition. Percentage rows with zero totals stay empty. |
| compact | boolean | - | false | Bar only: short numeric cell display without axes or legend. A shared domain gives comparable lengths. |
| range | [number, number] | - | - | Timeline only, required finite ascending range in caller-defined units. Every entry must fit. |
| marker | { value: number; label: string } | - | - | Optional timeline reference position. Outside-range positions remain described without a visual marker. |
| columns | Array<{ id: string; label: string }> | - | - | Cohort only, required unique columns. Each row has one percentage or null per column. |
| thresholds | [number, number, number, number] | - | - | Cohort only: four ascending bounds inside (0, 100), defining five ordered heat bands of chart series 1 that grow stronger with each band; the value prints on the cell. Defaults [20, 40, 60, 80]. |
| weekStartsOn | number | - | 0 | Activity only. 0 starts each week on Sunday and 1 starts it on Monday. Other chart types ignore it. |
Anatomy
| Part | Description |
|---|---|
| root | Named figure with description and loading state. |
| plot | Responsive plot and one keyboard inspection surface. Lines and area edges are smooth monotone curves that never overshoot a value; area fills fade from the series color at opacity-subtle to transparent. Grid lines are dashed and quiet; the zero line turns solid on signed domains. Bars are slim, round only their value end and never get outlines. Composition parts and donut sectors are separated by a 2px gap instead of an outline. Inspected line and area points use their series fill, a white 2px color-border-chart-marker ring and drop-shadow-low. The inspected composition part grows 4px above and below the track, and the inspected donut sector grows 4px outward, drawn above its neighbors. |
| legend | Series visibility buttons with compact keys (a short stroke for lines, a small swatch for filled marks) or a static status list with status icons. Composition and donut list each category with its amount and share; funnel rows show the conversion from the previous stage, the amount and the share of the first stage, and every stage uses series 1, since stages are one measure. |
| tooltip | Compact inspected values beside the pointer or keyboard-selected mark, bounded inside the plot and rounded with radius-container. |
| table | Semantic raw-data view with caption and headers. |
Accessibility
Role: figure
| Keys | Action |
|---|---|
| Tab | Enter the plot once; legend buttons and data toggle remain separate controls. |
| Arrow keys | Inspect rows and visible series; navigate ranges or matrix cells according to chart type. |
| Home / End | Inspect the first or last Cartesian row. |
| Escape | Close inspection and restore focus to the plot. |
- The required label names the figure; description supplies context. Every chart retains a semantic data table, including table=hidden.
- Null means missing for Cartesian values and not yet observed for cohorts. Zero is an observed value.
- Series retain palette identity when hidden. More than four series add patterns and dashes; with four or fewer, keep the legend or the data table visible, since a hidden legend leaves color as the only cue.
- Touch taps pin inspection; a second tap or outside tap dismisses it. Normal page scrolling remains available. Mouse hover never receives keyboard focus contours, and a focused plot keeps its focus ring while the mouse moves. Each bar group is one hit band across the value axis; the gaps between groups dismiss inspection. Uptime rows are 44px targets that pick the period under the pointer. In horizontal bars, Up and Down move between rows and Left and Right between series.
- Uptime samples represent equal-duration periods. Coverage and the mean of known availability remain distinct.
Install
npx werewolf-ui add chartRun npx werewolf-ui init once in your app before adding components. Init sets up tokens, their CSS import and agent rules. Add installs this component and its dependencies while preserving your theme. See Installation for requirements and the alternative registry setup.