Chart

Live Editor

function ChartDemo() {
  const [selected, setSelected] = React.useState(null);
  return (
    <ThemeProvider>
      <Chart
        type="bar"
        title="Weekly signups"
        data={[
          { label: 'Mon', value: 12 },
          { label: 'Tue', value: 18 },
          { label: 'Wed', value: 9 },
        ]}
        showLegend
        onPointSelect={setSelected}
      />
      {selected && <p>Selected: {selected.label} - {selected.value}</p>}
    </ThemeProvider>
  );
}

Result

Loading...

Compound usage:

<Chart.Root type="area" series={series} valueSuffix="%">
  <Chart.Title>Revenue comparison</Chart.Title>
  <Chart.Subtitle>Last 12 months</Chart.Subtitle>
  <Chart.Header>
    <button>Last 12 months</button>
  </Chart.Header>
</Chart.Root>

Key Props

data, values, labels, type, variant, title, subtitle, state, disabled, interactive, showLegend, showSummary, headless, ariaLabel, onPointSelect

Additional data-display props:

• series: multi-series chart input for line, area, step, scatter, and grouped bar charts
• valuePrefix / valueSuffix: format axis, tooltip, and summary values
• slot="header": inject custom filter/date controls above the chart surface

Notes

• Use either data or paired values and labels.
• Use series when you need comparison lines, multi-metric tooltips, or grouped bars.
• donut and radial currently use the primary series only.
• Chart.Header maps to the chart's slot="header" toolbar region.
• Chart.Title and Chart.Subtitle map to slotted header text regions and override the title / subtitle prop fallback.