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>