Chart

Responsive chart shells built on Recharts. Use ChartContainer for themed colors, then compose area, bar, or line series.

Examples

Area chart

Overview

ChartContainer injects chart color CSS variables and wraps a ResponsiveContainer. Pass Recharts chart roots as children — AreaChart, BarChart, or LineChart — and style series with var(--color-chart-1) through var(--color-chart-5), or gray tokens like var(--gray-1000) and var(--gray-150).

tsx

import {
  Area,
  AreaChart,
  CartesianGrid,
  ChartContainer,
  ChartTooltip,
  XAxis,
  YAxis,
} from "@standard-ui/react"

<ChartContainer className="h-64">
  <AreaChart data={monthlyData}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip />
    <Area
      dataKey="value"
      stroke="var(--color-chart-1)"
      fill="var(--color-chart-1)"
    />
  </AreaChart>
</ChartContainer>

Usage

Sizing

Give ChartContainer an explicit height class such as h-64. Width fills the parent by default.

tsx

<ChartContainer className="h-64">
  <AreaChart data={monthlyData}>{/* … */}</AreaChart>
</ChartContainer>

Series colors

Prefer chart tokens for categorical series. Use gray tokens when the chart should stay neutral against the surface.

tsx

<Area
  dataKey="value"
  stroke="var(--color-chart-1)"
  fill="var(--color-chart-1)"
  fillOpacity={0.2}
/>
{/* or neutral */}
<Area
  dataKey="value"
  stroke="var(--gray-1000)"
  fill="var(--gray-150)"
/>

API

ChartContainer is a themed wrapper. ChartTooltip defaults to ChartTooltipContent. Recharts primitives are re-exported for convenience.

Export	Role
ChartContainer	Themed shell with ResponsiveContainer and chart color vars.
ChartTooltip	Recharts tooltip with Standard UI content by default.
ChartTooltipContent	Default tooltip panel for payload rows.
ChartLegend	Legend with Standard UI content by default.
AreaChart / Area	Area chart root and series.
BarChart / Bar	Bar chart root and series.
LineChart / Line	Line chart root and series.
XAxis / YAxis	Cartesian axes.
CartesianGrid	Grid lines behind the plot.