Chart

Recharts primitives with a glass container and CSS color tokens.

Chart

Installation

1pnpm dlx shadcn@latest add @glasswave/chart

Usage

1import {2  ChartContainer,3  BarChart,4  Bar,5  XAxis,6  YAxis,7  CartesianGrid,8  ChartTooltip,9} from "glasswave";10 11const config = {12  desktop: { label: "Desktop", color: "hsl(211 100% 50%)" },13};14 15<ChartContainer config={config}>16  <BarChart data={data}>17    <CartesianGrid vertical={false} />18    <XAxis dataKey="name" />19    <YAxis />20    <ChartTooltip />21    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />22  </BarChart>23</ChartContainer>

ChartContainer sets --color-{key} from config and wraps children in ResponsiveContainer.

API Reference

Built on Recharts.

ChartContainer

Prop	Type	Default
`config`	`ChartConfig`	—

ChartConfig is Record<string, { label?: ReactNode; color?: string }>.