Chart

import { Chart } from 'ui-lab-components/chart';
 
export const metadata = {
  title: 'Basic Line Chart',
  description: 'A line chart with axes, grid lines, and a tooltip for inspecting values.'
};
 
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>
  );
}
 

import { Chart } from 'ui-lab-components/chart';
 
export const metadata = {
  title: 'Multi-series Chart',
  description: 'Compare two related trends with a shared legend and tooltip.'
};
 
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>
  );
}
 

import { Chart } from 'ui-lab-components/chart';
 
export const metadata = {
  title: 'Stacked Bar Chart',
  description: 'Stack related values to show both category totals and their composition.'
};
 
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>
  );
}
 

import { Chart } from 'ui-lab-components/chart';
 
export const metadata = {
  title: 'Area Chart with Reference',
  description: 'Add a labeled reference line to place a trend in context.'
};
 
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>
  );
}