A clear chart surface with a title, legend, actions, and a plot slot.
ChartCard gives EnterUI charts a consistent surface and hierarchy. Keep the plot directly on the card surface; use its legend and actions slots instead of placing a second frame around the data.
Blue and aqua series, visible axes, and a compact tooltip on hover or keyboard focus.
<ChartCard
title="Revenue Statistic"
legend={<Legend items={[{ label: "Ads Sales" }, { label: "Referral Sales" }]} />}
actions={
<>
<Select defaultValue="monthly">
<SelectTrigger aria-label="Period"><SelectValue /></SelectTrigger>
<SelectContent><SelectItem value="monthly">Monthly</SelectItem></SelectContent>
</Select>
<Button variant="secondary">Export</Button>
</>
}
>
<StackedBarChart
ariaLabel="Monthly revenue by source"
data={[
{ month: "Jan", ads: 24_000_000, referrals: 8_000_000 },
{ month: "Feb", ads: 28_000_000, referrals: 10_000_000 },
{ month: "Mar", ads: 24_000_000, referrals: 10_000_000 },
{ month: "Apr", ads: 19_000_000, referrals: 10_000_000 },
{ month: "May", ads: 24_000_000, referrals: 9_000_000 },
{ month: "Jun", ads: 28_000_000, referrals: 10_000_000 },
{ month: "Jul", ads: 23_000_000, referrals: 9_000_000 },
{ month: "Aug", ads: 29_000_000, referrals: 10_000_000 },
{ month: "Sep", ads: 20_000_000, referrals: 10_000_000 },
{ month: "Oct", ads: 17_000_000, referrals: 12_000_000 },
{ month: "Nov", ads: 10_000_000, referrals: 13_000_000 },
{ month: "Dec", ads: 21_000_000, referrals: 11_000_000 },
]}
height={240}
series={[{ key: "ads", label: "Ads Sales" }, { key: "referrals", label: "Referral Sales" }]}
xKey="month"
/>
</ChartCard>import { Button, ChartCard, Legend, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StackedBarChart } from "@froggdesign/enter-ui-react";ChartCard uses a heading for its title. Give the chart inside a descriptive ariaLabel or label; the card title alone does not name the chart. Chart bars expose their values through SVG titles and keyboard focus.
title, description: header copy.legend: series labels below the title and actions.actions: optional controls in the header.div props.The card uses the shared EnterUI surface, border, spacing, and chart tokens. Its plot has no second inset border.
ChartCard owns its padding, heading size, actions, and plot spacing. Use the public layout primitives to place cards side by side; they wrap on narrow screens.
<Grid min={380} gap={24}>
<ChartCard title="Revenue trend" description="Daily recurring revenue · USD">
<AreaChart data={revenue} xKey="day" yKey="value" ariaLabel="Revenue trend"
curve="smooth" height={220} valueFormatter={(value) => `$${value}K`} />
</ChartCard>
<ChartCard title="Expansion pipeline" description="Qualified opportunities">
<LineChart data={pipeline} xKey="day" yKey="value" ariaLabel="Expansion pipeline"
curve="smooth" showDots height={220} />
</ChartCard>
</Grid>See the revenue dashboard for a complete composition using only component props and variants, without consumer CSS.