Chart A card wrapper for Recharts with consistent design system theming, pre-configured color palette, and responsive sizing.
A card wrapper for Recharts with consistent design system theming, pre-configured color palette, loading/empty states, and responsive sizing.
Monthly Revenue Jan – Jun 2025
import { ChartContainer, ChartTooltipContent, chartColors } from "@work-rjkashyap/unified-ui"; import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"; const data = [ { month: "Jan", revenue: 4000 }, { month: "Feb", revenue: 3000 }, { month: "Mar", revenue: 5000 }, { month: "Apr", revenue: 4500 }, { month: "May", revenue: 6000 }, { month: "Jun", revenue: 5500 }, ]; <ChartContainer height={240}> <ResponsiveContainer width="100%" height="100%"> <BarChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: -12 }}> <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} /> <XAxis dataKey="month" stroke="var(--muted-foreground)" fontSize={12} tickLine={false} axisLine={false} /> <YAxis stroke="var(--muted-foreground)" fontSize={12} tickLine={false} axisLine={false} /> <Tooltip content={<ChartTooltipContent />} cursor={{ fill: "var(--muted)", opacity: 0.3 }} /> <Bar dataKey="revenue" fill={chartColors[0]} radius={[4, 4, 0, 0]} maxBarSize={40} /> </BarChart> </ResponsiveContainer> </ChartContainer> Install the component via the CLI in one command.
npm pnpm yarn bun
npx @work-rjkashyap/unified-ui add chart pnpm dlx @work-rjkashyap/unified-ui add chart npx @work-rjkashyap/unified-ui add chart bunx @work-rjkashyap/unified-ui add chart
If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.
Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.
npm pnpm yarn bun
npm install @work-rjkashyap/unified-ui pnpm add @work-rjkashyap/unified-ui yarn add @work-rjkashyap/unified-ui bun add @work-rjkashyap/unified-ui import { ChartContainer, ChartTooltipContent, Badge, } from "@work-rjkashyap/unified-ui" ; import { ChartContainer, ChartTooltipContent, chartColors } from "@work-rjkashyap/unified-ui"; import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"; const data = [ { week: "W1", sales: 320 }, { week: "W2", sales: 450 }, { week: "W3", sales: 280 }, { week: "W4", sales: 590 }, { week: "W5", sales: 420 }, ]; <ChartContainer height={220}> <ResponsiveContainer width="100%" height="100%"> <BarChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: -12 }}> <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} /> <XAxis dataKey="week" stroke="var(--muted-foreground)" fontSize={12} tickLine={false} axisLine={false} /> <YAxis stroke="var(--muted-foreground)" fontSize={12} tickLine={false} axisLine={false} /> <Tooltip content={<ChartTooltipContent />} cursor={{ fill: "var(--muted)", opacity: 0.3 }} /> <Bar dataKey="sales" fill={chartColors[0]} radius={[4, 4, 0, 0]} maxBarSize={36} /> </BarChart> </ResponsiveContainer> </ChartContainer> Revenue vs Expenses Q1 – Q2 2025
import { ChartContainer, ChartTooltipContent, chartColors } from "@work-rjkashyap/unified-ui"; import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"; const data = [ { month: "Jan", revenue: 4000, expenses: 2800 }, { month: "Feb", revenue: 3200, expenses: 2600 }, { month: "Mar", revenue: 5100, expenses: 3000 }, { month: "Apr", revenue: 4700, expenses: 2900 }, { month: "May", revenue: 5800, expenses: 3200 }, { month: "Jun", revenue: 6200, expenses: 3400 }, ]; <ChartContainer height={240} footer={ <div className="flex items-center gap-4"> <div className="flex items-center gap-1.5"> <div className="size-2.5 rounded-full bg-primary" /> <span>Revenue</span> </div> <div className="flex items-center gap-1.5"> <div className="size-2.5 rounded-full" style={{ backgroundColor: chartColors[4] }} /> <span>Expenses</span> </div> </div> } > <ResponsiveContainer width="100%" height="100%"> <BarChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: -12 }}> <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} /> <XAxis dataKey="month" stroke="var(--muted-foreground)" fontSize={12} tickLine={false} axisLine={false} /> <YAxis stroke="var(--muted-foreground)" fontSize={12} tickLine={false} axisLine={false} /> <Tooltip content={<ChartTooltipContent />} cursor={{ fill: "var(--muted)", opacity: 0.3 }} /> <Bar dataKey="revenue" fill={chartColors[0]} radius={[4, 4, 0, 0]} maxBarSize={28} /> <Bar dataKey="expenses" fill={chartColors[4]} radius={[4, 4, 0, 0]} maxBarSize={28} /> </BarChart> </ResponsiveContainer> </ChartContainer> import { ChartContainer, ChartTooltipContent, chartColors } from "@work-rjkashyap/unified-ui"; import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"; const data = [ { day: "Mon", visitors: 120 }, { day: "Tue", visitors: 210 }, { day: "Wed", visitors: 180 }, { day: "Thu", visitors: 340 }, { day: "Fri", visitors: 290 }, { day: "Sat", visitors: 430 }, { day: "Sun", visitors: 380 }, ]; <ChartContainer height={240}> <ResponsiveContainer width="100%" height="100%"> <LineChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: -12 }}> <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" /> <XAxis dataKey="day" stroke="var(--muted-foreground)" fontSize={12} tickLine={false} axisLine={false} /> <YAxis stroke="var(--muted-foreground)" fontSize={12} tickLine={false} axisLine={false} /> <Tooltip content={<ChartTooltipContent />} /> <Line type="monotone" dataKey="visitors" stroke={chartColors[1]} strokeWidth={2} dot={{ r: 4, fill: chartColors[1] }} activeDot={{ r: 6, fill: chartColors[1] }} /> </LineChart> </ResponsiveContainer> </ChartContainer> Users & Sessions Growth over 6 months
import { ChartContainer, ChartTooltipContent, chartColors } from "@work-rjkashyap/unified-ui"; import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"; const data = [ { month: "Jan", users: 400, sessions: 240 }, { month: "Feb", users: 600, sessions: 380 }, { month: "Mar", users: 550, sessions: 420 }, { month: "Apr", users: 780, sessions: 500 }, { month: "May", users: 920, sessions: 650 }, { month: "Jun", users: 1100, sessions: 780 }, ]; <ChartContainer height={240} footer={ <div className="flex items-center gap-4"> <div className="flex items-center gap-1.5"> <div className="size-2.5 rounded-full" style={{ backgroundColor: chartColors[1] }} /> <span>Users</span> </div> <div className="flex items-center gap-1.5"> <div className="size-2.5 rounded-full" style={{ backgroundColor: chartColors[2] }} /> <span>Sessions</span> </div> </div> } > <ResponsiveContainer width="100%" height="100%"> <AreaChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: -12 }}> <defs> <linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor={chartColors[1]} stopOpacity={0.3} /> <stop offset="95%" stopColor={chartColors[1]} stopOpacity={0} /> </linearGradient> <linearGradient id="colorSessions" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor={chartColors[2]} stopOpacity={0.3} /> <stop offset="95%" stopColor={chartColors[2]} stopOpacity={0} /> </linearGradient> </defs> <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" /> <XAxis dataKey="month" stroke="var(--muted-foreground)" fontSize={12} tickLine={false} axisLine={false} /> <YAxis stroke="var(--muted-foreground)" fontSize={12} tickLine={false} axisLine={false} /> <Tooltip content={<ChartTooltipContent />} /> <Area type="monotone" dataKey="users" stroke={chartColors[1]} strokeWidth={2} fill="url(#colorUsers)" /> <Area type="monotone" dataKey="sessions" stroke={chartColors[2]} strokeWidth={2} fill="url(#colorSessions)" /> </AreaChart> </ResponsiveContainer> </ChartContainer> Traffic Sources Device breakdown
import { ChartContainer, ChartTooltipContent, chartColors } from "@work-rjkashyap/unified-ui"; import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip } from "recharts"; const data = [ { name: "Desktop", value: 55 }, { name: "Mobile", value: 30 }, { name: "Tablet", value: 15 }, ]; const colors = [chartColors[0], chartColors[1], chartColors[2]]; <ChartContainer height={240} footer={ <div className="flex items-center justify-center gap-4"> {data.map((entry, i) => ( <div key={entry.name} className="flex items-center gap-1.5"> <div className="size-2.5 rounded-full" style={{ backgroundColor: colors[i] }} /> <span>{entry.name} ({entry.value}%)</span> </div> ))} </div> } > <ResponsiveContainer width="100%" height="100%"> <PieChart> <Tooltip content={<ChartTooltipContent />} /> <Pie data={data} cx="50%" cy="50%" innerRadius={50} outerRadius={80} paddingAngle={3} dataKey="value" nameKey="name" strokeWidth={0} > {data.map((entry, index) => ( <Cell key={entry.name} fill={colors[index]} /> ))} </Pie> </PieChart> </ResponsiveContainer> </ChartContainer> <ChartContainer height={300} loading /> No data yet
Signups will appear here once recorded.
<ChartContainer height={300} emptyContent={ <div className="text-center"> <p className="font-medium">No data yet</p> <p className="text-sm text-muted-foreground mt-1">Signups will appear here once recorded.</p> </div> } /> The chartColors array provides 10 pre-defined colors that integrate with design system tokens:
import { chartColors } from "@work-rjkashyap/unified-ui" ; < Bar dataKey = "revenue" fill = {chartColors[ 0 ]} /> // primary < Bar dataKey = "expenses" fill = {chartColors[ 1 ]} /> // info < Bar dataKey = "profit" fill = {chartColors[ 2 ]} /> // success Index Token Usage 0var(--primary)Primary 1var(--info)Info 2var(--success)Success 3var(--warning)Warning 4var(--danger)Danger 5var(--secondary)Secondary 6var(--muted-foreground)Muted 7oklch sky Sky 8oklch emerald Emerald 9oklch amber Amber
Prop Type Default Description titlestring— Chart title. descriptionstring— Chart description/subtitle. heightnumber350Chart area height in pixels. childrenReactNode— The Recharts chart component(s). footerReactNode— Footer content (legend, notes). loadingbooleanfalseShows loading indicator. loadingIndicatorReactNode— Custom loading indicator. emptyContentReactNode— Content when chart has no data. classNamestring— Additional CSS classes.
Prop Type Default Description labelstring— Tooltip header label. payloadArray<{ name, value, color, fill }>— Recharts tooltip payload. activeboolean— Whether tooltip is active. formatter(value, name) => string— Custom value formatter. classNamestring— Additional CSS classes.
Chart container uses semantic heading for title.
Footer content is associated with the chart visually.
Color palette is designed with sufficient contrast for both light and dark modes.
For accessible chart content, add aria-label or role="img" with a
descriptive label to your Recharts ResponsiveContainer or chart wrapper.
Token Usage --backgroundCard background --foregroundTitle text --muted-foregroundDescription, axis text --borderCard and tooltip borders --radius-lgCard border radius --primaryChart color 1 --infoChart color 2 --successChart color 3