Chart Card

A titled card that frames the design-system chart container. Pass a ChartConfig and a single recharts chart as children - ChartCard supplies the header, spacing, and the themed container so the chart looks native to Rogo in both themes.

Examples

A framed chart in chatLoading state

Show revenue vs. expenses by quarter.

Revenue outpaced expenses in every quarter this year:

Quarterly performance

Revenue vs. expenses ($M)

Props

Prop	Type	Description
`title`	`ReactNode`	Card title.
`subtitle`	`ReactNode`	Optional muted subtitle.
`action`	`ReactNode`	Optional top-right slot (range toggle, badge).
`config`	`ChartConfig`	Series config passed to the chart container.
`children`	recharts chart	A single chart element (`BarChart`, `LineChart`, …).
`chartClassName`	`string`	Class applied to the chart container (e.g. height).

tsx

<ChartCard title="Quarterly performance" subtitle="Revenue vs. expenses ($M)" config={config}>
  <BarChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="quarter" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="revenue" fill="var(--color-revenue)" radius={2} />
  </BarChart>
</ChartCard>

Agent context

Use ChartCard for a framed chart. Pass a ChartConfig and a single recharts chart as children. Paint every series with rgb(var(--chart-N)); a lone series uses --chart-1 (green). The default tooltip is pre-styled - use it as-is.

PreviousComparison Table

NextTrend Tile