Chart

Visualizes structured data with bars, lines, and trend displays.

import { Chart } from 'ui-lab-components/chart';
import { Chart } from 'ui-lab-components/chart';
import data from './data.json';
 
export default function Example() {
  return (
    <Chart data={data} x="month" aria-label="Revenue and expenses">
      <Chart.Grid />
      <Chart.Axis axis="x" />
      <Chart.Axis axis="y" />
      <Chart.Line y="revenue" label="Revenue" curve="smooth" />
      <Chart.Line y="expenses" label="Expenses" curve="smooth" />
      <Chart.Legend />
      <Chart.Tooltip />
    </Chart>
  );
}

chart/01-basic-line

A line chart with axes, grid lines, and a tooltip for inspecting values.

Loading interactive preview
import { Chart } from 'ui-lab-components/chart';
 
const data = [
  { month: 'Jan', revenue: 42 },
  { month: 'Feb', revenue: 58 },
  { month: 'Mar', revenue: 51 },
  { month: 'Apr', revenue: 76 },
  { month: 'May', revenue: 68 },
  { month: 'Jun', revenue: 89 }
];
 
export default function Example() {
  return (
    <Chart data={data} x="month" aria-label="Monthly revenue">
      <Chart.Grid />
      <Chart.Axis axis="x" />
      <Chart.Axis axis="y" />
      <Chart.Line y="revenue" label="Revenue" />
      <Chart.Tooltip />
    </Chart>
  );
}

chart/02-multi-series

Compare two related trends with a shared legend and tooltip.

Loading interactive preview
import { Chart } from 'ui-lab-components/chart';
 
const data = [
  { month: 'Jan', current: 42, previous: 34 },
  { month: 'Feb', current: 58, previous: 46 },
  { month: 'Mar', current: 51, previous: 49 },
  { month: 'Apr', current: 76, previous: 61 },
  { month: 'May', current: 68, previous: 64 },
  { month: 'Jun', current: 89, previous: 72 }
];
 
export default function Example() {
  return (
    <Chart data={data} x="month" aria-label="Revenue comparison">
      <Chart.Grid axis="y" />
      <Chart.Axis axis="x" />
      <Chart.Axis axis="y" />
      <Chart.Line y="current" label="This year" curve="smooth" />
      <Chart.Line y="previous" label="Last year" curve="smooth" />
      <Chart.Legend />
      <Chart.Tooltip />
    </Chart>
  );
}

chart/03-stacked-bars

Stack related values to show both category totals and their composition.

Loading interactive preview
import { Chart } from 'ui-lab-components/chart';
 
const data = [
  { quarter: 'Q1', product: 38, services: 24, support: 12 },
  { quarter: 'Q2', product: 46, services: 31, support: 15 },
  { quarter: 'Q3', product: 42, services: 36, support: 18 },
  { quarter: 'Q4', product: 55, services: 39, support: 21 }
];
 
export default function Example() {
  return (
    <Chart data={data} x="quarter" aria-label="Quarterly revenue by category">
      <Chart.Grid axis="y" />
      <Chart.Axis axis="x" />
      <Chart.Axis axis="y" />
      <Chart.Bar y="product" label="Product" stack="revenue" />
      <Chart.Bar y="services" label="Services" stack="revenue" />
      <Chart.Bar y="support" label="Support" stack="revenue" />
      <Chart.Legend />
      <Chart.Tooltip />
    </Chart>
  );
}

chart/04-area-reference

Add a labeled reference line to place a trend in context.

Loading interactive preview
import { Chart } from 'ui-lab-components/chart';
 
const data = [
  { week: 'Week 1', score: 62 },
  { week: 'Week 2', score: 71 },
  { week: 'Week 3', score: 68 },
  { week: 'Week 4', score: 79 },
  { week: 'Week 5', score: 84 },
  { week: 'Week 6', score: 88 }
];
 
export default function Example() {
  return (
    <Chart data={data} x="week" domain={[0, 100]} aria-label="Weekly performance score">
      <Chart.Grid axis="y" />
      <Chart.Axis axis="x" />
      <Chart.Axis axis="y" />
      <Chart.Area y="score" label="Score" curve="smooth" />
      <Chart.Reference y={75} label="Target" />
      <Chart.Tooltip />
    </Chart>
  );
}