Chart
Beautiful and customizable charts built with Recharts.
Installation
npx shadcn@latest add https://ui.saturation.io/r/chart.jsonUsage
1600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import {2 ChartContainer,3 ChartTooltip,4 ChartTooltipContent,5} 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/chart"6600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { AreaChart, Area } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"recharts"7 8600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">export 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">default 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">function Example() {9 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">return (10 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400"> 600 dark:text-blue-400">data={data}> 19 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400"> 600 dark:text-blue-400">content={600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400"> />} /> 20 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400"> 600 dark:text-blue-400">dataKey=600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"value" 600 dark:text-blue-400">fill=600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">var(--color-value)" /> 21 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>22 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>23 )24}Examples
Area Chart - Gradient
An area chart with gradient fill showing total visitors for the last 6 months.
Bar Chart - Multiple
A bar chart with multiple series showing desktop and mobile visitors side by side.
Bar Chart - Interactive
An interactive bar chart with clickable tabs to switch between desktop and mobile views.
Pie Chart - Donut with Text
A donut chart with center text showing browser usage statistics.
Radial Chart - Stacked
A radial bar chart with stacked sections showing desktop and mobile visitors in a semi-circle design.
API Reference
ChartContainer
The main wrapper component for all charts. Provides theming and responsive container.
| Prop | Type | Description |
|---|---|---|
| config | ChartConfig | Configuration object for chart colors and labels |
| className | string | Additional CSS classes |
ChartTooltip
Tooltip component from Recharts. Use with ChartTooltipContent for styled tooltips.
ChartTooltipContent
Styled tooltip content component with support for indicators and custom formatting.
ChartLegend
Legend component from Recharts. Use with ChartLegendContent for styled legends.
ChartLegendContent
Styled legend content component with support for icons and custom labels.