Chart

Import

import { Chart } from '@delightstack/components';

The ChartData and Dataset types are also exported:

import type { ChartData, Dataset } from '@delightstack/components';

Basic Usage

View code

<script>
  import { Chart } from '@delightstack/components';

  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      { label: 'Revenue', data: [4200, 5800, 4900, 7100, 6300, 8500] },
      { label: 'Expenses', data: [3100, 3400, 3800, 4200, 3600, 4100] },
    ],
  };
</script>

<Chart type="bar" data={data} height={300} />

Examples

Line Chart

View code

<script>
  const salesData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      { label: '2025', data: [12, 19, 3, 5, 2, 3] },
      { label: '2024', data: [8, 15, 7, 8, 4, 6] },
    ],
  };
</script>

<Chart type="line" data={salesData} height={250} />

Area Chart with Data Points

View code

<Chart type="area" data={salesData} show_points />

Stacked Bar Chart

View code

<Chart type="bar" data={salesData} stacked />

Horizontal Bar Chart

View code

<Chart type="horizontal-bar" data={salesData} height={300} />

Donut Chart

View code

<Chart
  type="donut"
  data={{
    labels: ['Desktop', 'Mobile', 'Tablet'],
    datasets: [{ label: 'Traffic', data: [65, 30, 5] }],
  }}
  inner_radius={0.6}
  height={300}
/>

Pie Chart

View code

<Chart
  type="pie"
  data={{
    labels: ['Chrome', 'Firefox', 'Safari', 'Edge'],
    datasets: [{ label: 'Browser Share', data: [65, 15, 12, 8] }],
  }}
/>

Custom Colors

View code

<Chart
  type="bar"
  data={salesData}
  colors={['#6366f1', '#ec4899', '#14b8a6', '#f97316']}
/>

Theming

By default the series colors come from the theme’s categorical chart palette (--chart-1 … --chart-8 in @delightstack/components/styles), so a chart dropped into a delightstack dashboard matches the active theme — including light/dark — with no configuration. The palette is a tonal “brand family” derived from your --color-primary seed (hues stay in an analogous band while lightness varies), so rebranding the app recolors the charts automatically.

To recolor a single series globally, override the token in your own CSS:

:root {
  --chart-1: #6366f1;
  --chart-2: oklch(0.7 0.15 30);
}

For a one-off chart, prefer the colors prop or a per-series color.

Skeleton Loading

Show loaded

View code

<Chart type="bar" skeleton={loading} height={300} data={loading ? empty : data} />
<Chart type="pie" skeleton={loading} height={300} data={loading ? empty : traffic} />

Props

Prop	Type	Default	Description
type	'line' | 'area' | 'bar' | 'horizontal-bar' | 'pie' | 'donut'	'line'	Chart type
data	ChartData	required	Data to display
height	number	300	Chart height in pixels
colors	string[]	theme	Custom color palette (overrides the theme --chart-* default)
show_grid	boolean	true	Show grid lines
show_legend	boolean	true	Show legend
show_tooltip	boolean	true	Enable interactive tooltips
animate	boolean	true	Animate on initial load and data changes
stacked	boolean	false	Stack datasets (bar, area)
curved	boolean	true	Smooth curves for line/area charts
show_points	boolean	false	Show data points on line/area charts
inner_radius	number	0	Inner radius ratio for donut (0 = pie, >0 = donut)
skeleton	boolean	false	Show loading skeleton
id	string	auto	Element ID
class	string	''	Additional CSS classes

Types

interface ChartData {
  labels: string[];
  datasets: Dataset[];
}

interface Dataset {
  label: string;
  data: number[];
  color?: string;
}

Accessibility

• SVG chart has role="img" with an aria-label describing the chart type
• Legend items are interactive buttons for toggling dataset visibility
• Tooltips appear on hover showing exact values and dataset labels
• Click legend items to toggle datasets on or off (at least one dataset must remain visible)
• Responsive width via resizeObserver attachment — height is fixed via the height prop
• Empty state displays a “No data available” message
• Respects prefers-reduced-motion by disabling all animations