Chart
Composes Recharts into a responsive container with themed tooltips and legends.
Chart is an Authored component: coss/ui has no counterpart, so it takes
shadcn/ui's Structure and wraps Recharts rather than
copying an upstream file. The container, tooltip and legend reuse kosori's
design vocabulary: the tooltip surface comes from Popover, muted labels use
text-muted-foreground, and series colours come from the --chart-1 to
--chart-5 Tokens through ChartStyle.
Installation
npx shadcn@latest add @kosori/chartExample
chart-example.tsx
'use client';
import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
import {
type ChartConfig,
ChartContainer,
ChartLegend,
ChartLegendContent,
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart';
const chartData = [
{ desktop: 186, mobile: 80, month: 'January' },
{ desktop: 305, mobile: 200, month: 'February' },
{ desktop: 237, mobile: 120, month: 'March' },
{ desktop: 73, mobile: 190, month: 'April' },
{ desktop: 209, mobile: 130, month: 'May' },
{ desktop: 214, mobile: 140, month: 'June' },
];
const formatMonth = (value: string) => value.slice(0, 3);
const chartConfig = {
desktop: {
color: 'var(--chart-1)',
label: 'Desktop',
},
mobile: {
color: 'var(--chart-2)',
label: 'Mobile',
},
} satisfies ChartConfig;
const ChartExample = () => (
<ChartContainer className='w-full' config={chartConfig}>
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<XAxis
axisLine={false}
dataKey='month'
tickFormatter={formatMonth}
tickLine={false}
tickMargin={10}
/>
<ChartTooltip content={<ChartTooltipContent />} />
<ChartLegend content={<ChartLegendContent />} />
<Bar dataKey='desktop' fill='var(--color-desktop)' radius={4} />
<Bar dataKey='mobile' fill='var(--color-mobile)' radius={4} />
</BarChart>
</ChartContainer>
);
export default ChartExample;
Usage
'use client';
import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
import {
type ChartConfig,
ChartContainer,
ChartLegend,
ChartLegendContent,
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart';
const chartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
} satisfies ChartConfig;
const data = [
{ desktop: 186, month: 'January' },
{ desktop: 305, month: 'February' },
];
const ChartDemo = () => (
<ChartContainer className='w-full' config={chartConfig}>
<BarChart accessibilityLayer data={data}>
<CartesianGrid vertical={false} />
<XAxis dataKey='month' tickLine={false} axisLine={false} />
<ChartTooltip content={<ChartTooltipContent />} />
<ChartLegend content={<ChartLegendContent />} />
<Bar dataKey='desktop' fill='var(--color-desktop)' radius={4} />
</BarChart>
</ChartContainer>
);A ChartConfig entry labels a series and sets its colour. ChartStyle writes
those colours as custom properties on the container, so the same config works in
light and dark without a second definition. Pass theme instead of color when
a series needs a different value per scheme.