Chart
Data visualization components powered by Recharts with built-in theming support.
Bar chart
<ChartContainer config={chartConfig} className="h-64 w-full">
<BarChart data={chartData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" tickLine={false} axisLine={false} />
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer> Line chart
<ChartContainer config={chartConfig} className="h-64 w-full">
<LineChart data={chartData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" tickLine={false} axisLine={false} />
<ChartTooltip content={<ChartTooltipContent />} />
<Line type="monotone" dataKey="revenue" stroke="var(--color-revenue)" strokeWidth={2} dot={false} />
</LineChart>
</ChartContainer> Area chart
<ChartContainer config={chartConfig} className="h-64 w-full">
<AreaChart data={chartData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" tickLine={false} axisLine={false} />
<ChartTooltip content={<ChartTooltipContent />} />
<Area type="monotone" dataKey="sales" fill="var(--color-sales)" fillOpacity={0.2} stroke="var(--color-sales)" strokeWidth={2} />
</AreaChart>
</ChartContainer> With legend
<ChartContainer config={chartConfig} className="h-72 w-full">
<BarChart data={chartData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" tickLine={false} axisLine={false} />
<ChartTooltip content={<ChartTooltipContent />} />
<ChartLegend content={<ChartLegendContent />} />
<Bar dataKey="orders" fill="var(--color-orders)" radius={4} />
<Bar dataKey="returns" fill="var(--color-returns)" radius={4} />
</BarChart>
</ChartContainer> Stacked bar chart
<ChartContainer config={chartConfig} className="h-64 w-full">
<BarChart data={chartData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" tickLine={false} axisLine={false} />
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="shipped" stackId="a" fill="var(--color-shipped)" radius={[0, 0, 4, 4]} />
<Bar dataKey="pending" stackId="a" fill="var(--color-pending)" radius={[4, 4, 0, 0]} />
</BarChart>
</ChartContainer>