Chart

Playground

<ChartContainer config={salesConfig} className="aspect-auto h-[360px] w-full">
  <BarChart
    accessibilityLayer
    data={salesData}
    barCategoryGap={10}
    margin={{ top: 12, left: 0, right: 24 }}
  >
    <CartesianGrid vertical={false} strokeDasharray="4 4" />
    <XAxis
      dataKey="date"
      tickLine={false}
      axisLine={false}
      tickMargin={12}
      interval={0}
      tickFormatter={formatSalesAxis}
    />
    <YAxis
      tickLine={false}
      axisLine={false}
      tickMargin={8}
      width={40}
      domain={[0, 24000]}
      ticks={salesTicks}
      tickFormatter={(value) => (value === 0 ? "0" : `${value / 1000}k`)}
    />
    <ChartTooltip
      cursor={<ChartCursor />}
      content={<ChartTooltipContent labelFormatter={formatSalesDate} />}
    />
    <Bar dataKey="sales" fill="var(--color-sales)" barSize={14} radius={[2, 2, 0, 0]} />
  </BarChart>
</ChartContainer>

Preview

Wrap any recharts chart in ChartContainer with a config. Each config key becomes a --color-* CSS variable scoped to the chart, referenced from the series fill.

const chartConfig = {
  sales: { label: "Sales", color: "var(--chart-7)" },
} satisfies ChartConfig

<ChartContainer config={chartConfig} className="aspect-auto h-[360px] w-full">
  <BarChart
    accessibilityLayer
    data={salesData}
    barCategoryGap={10}
    margin={{ top: 12, left: 0, right: 24 }}
  >
    <CartesianGrid vertical={false} strokeDasharray="4 4" />
    <XAxis
      dataKey="date"
      tickLine={false}
      axisLine={false}
      tickMargin={12}
      interval={0}
      tickFormatter={formatSalesAxis}
    />
    <YAxis
      tickLine={false}
      axisLine={false}
      tickMargin={8}
      width={40}
      domain={[0, 24000]}
      ticks={salesTicks}
      tickFormatter={(value) => (value === 0 ? "0" : `${value / 1000}k`)}
    />
    <ChartTooltip
      cursor={<ChartCursor />}
      content={<ChartTooltipContent labelFormatter={formatSalesDate} />}
    />
    <Bar dataKey="sales" fill="var(--color-sales)" barSize={14} radius={[2, 2, 0, 0]} />
  </BarChart>
</ChartContainer>

Installation

npx shadcn@latest add https://espresso-base-ui.vercel.app/r/chart.json

Usage

import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

const config = {
  sales: { label: "Sales", color: "var(--chart-7)" },
} satisfies ChartConfig

<ChartContainer config={config}>
  <BarChart accessibilityLayer data={data}>
    <Bar dataKey="sales" fill="var(--color-sales)" />
  </BarChart>
</ChartContainer>

Chart config

ChartConfig maps each data key to a label, an optional icon component, and either a single color or a per-theme theme record. ChartStyle (rendered automatically by the container) emits the values as --color-* variables, switching the theme record under the .dark selector.

const config = {
  desktop: {
    label: "Desktop",
    theme: { light: "#2563eb", dark: "#60a5fa" },
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-5)",
  },
} satisfies ChartConfig

Tooltip

ChartTooltip is the recharts Tooltip with position animation disabled; pass ChartTooltipContent as its content to get config-driven labels, indicator dots and formatted numeric values. The indicator can be a dot, a line or dashed, and the label row can be hidden or reformatted.

<ChartTooltip
  cursor={false}
  content={
    <ChartTooltipContent
      indicator="line"
      labelFormatter={(value) => "Month: " + value}
    />
  }
/>

Legend

ChartLegend re-exports the recharts Legend; give it ChartLegendContent to render color chips (or the config's icons) with labels from the chart config.

<ChartLegend content={<ChartLegendContent />} />

API reference

ChartContainer provides the config through context – ChartTooltipContent and ChartLegendContent must render inside it. The exported ChartConfig type keeps configs type-safe with satisfies.

Accessibility & styling hooks

Pass recharts' accessibilityLayer prop to your chart for keyboard navigation and screen-reader access to the data. The container scopes its color variables with a data-chart id and tags itself data-slot="chart"; series colors resolve per theme, so charts restyle automatically in dark mode. Reference any config key anywhere inside the chart as var(--color-key) – fills, strokes, even per-cell colors.