# Chart

A Recharts wrapper with themed tooltips, legends, and CSS variable color config.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode name="chart">
      <ChartDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode name="chart">
      <ChartDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode name="chart">
      <ChartDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode name="chart">
      <ChartDemo />
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## ChartConfig [#chartconfig]

`ChartConfig` maps each data key to a label and a color. Colors are injected as CSS variables (`--color-{key}`) scoped to the chart container, so Recharts `stroke` and `fill` can reference them as `var(--color-{key})`.

```tsx
import type { ChartConfig } from "@/components/ui/chart";

const config: ChartConfig = {
  revenue: {
    label: "Revenue",
    color: "hsl(var(--chart-1))",
  },
  expenses: {
    label: "Expenses",
    color: "hsl(var(--chart-2))",
  },
};
```

Use the `theme` key instead of `color` to supply different values per color scheme.

```tsx
const config: ChartConfig = {
  revenue: {
    label: "Revenue",
    theme: {
      light: "#2563eb",
      dark: "#60a5fa",
    },
  },
};
```

## Bar chart [#bar-chart]

```tsx
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

<ChartContainer config={config} className="h-64 w-full">
  <BarChart data={data}>
    <CartesianGrid strokeDasharray="3 3" vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <YAxis tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
    <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
  </BarChart>
</ChartContainer>
```

## Area chart [#area-chart]

Use a gradient `fill` for an area chart by defining a `<defs>` linearGradient and referencing it via `url(#id)`.

```tsx
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";

<ChartContainer config={config} className="h-64 w-full">
  <AreaChart data={data}>
    <defs>
      <linearGradient id="fillRevenue" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor="var(--color-revenue)" stopOpacity={0.3} />
        <stop offset="95%" stopColor="var(--color-revenue)" stopOpacity={0} />
      </linearGradient>
    </defs>
    <CartesianGrid strokeDasharray="3 3" vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Area
      dataKey="revenue"
      type="natural"
      stroke="var(--color-revenue)"
      fill="url(#fillRevenue)"
    />
  </AreaChart>
</ChartContainer>
```

## Tooltip [#tooltip]

`ChartTooltipContent` wraps Recharts' custom tooltip slot with design-system styles. Control the indicator shape with the `indicator` prop.

```tsx
{/* Dot indicator (default) */}
<ChartTooltip content={<ChartTooltipContent indicator="dot" />} />

{/* Line indicator */}
<ChartTooltip content={<ChartTooltipContent indicator="line" />} />

{/* Dashed line indicator */}
<ChartTooltip content={<ChartTooltipContent indicator="dashed" />} />

{/* Hide the label row */}
<ChartTooltip content={<ChartTooltipContent hideLabel />} />
```

## Legend [#legend]

`ChartLegendContent` renders labeled color swatches for each series in the config.

```tsx
{/* Show legend */}
<ChartLegend content={<ChartLegendContent />} />

{/* Hide the series icon */}
<ChartLegend content={<ChartLegendContent hideIcon />} />
```

## Props [#props]

### ChartContainer [#chartcontainer]

| Prop               | Type                                  | Default | Description                                        |
| ------------------ | ------------------------------------- | ------- | -------------------------------------------------- |
| `config`           | `ChartConfig`                         | —       | Required. Maps keys to labels and colors           |
| `initialDimension` | `{ width?: number; height?: number }` | —       | Initial size hint for server rendering             |
| `className`        | `string`                              | —       | Additional CSS classes. Set a height (e.g. `h-64`) |

### ChartTooltipContent [#charttooltipcontent]

| Prop            | Type                          | Default | Description                                   |
| --------------- | ----------------------------- | ------- | --------------------------------------------- |
| `hideLabel`     | `boolean`                     | `false` | Hide the category label row                   |
| `hideIndicator` | `boolean`                     | `false` | Hide the color swatch/indicator               |
| `indicator`     | `"dot" \| "line" \| "dashed"` | `"dot"` | Shape of the per-series color indicator       |
| `nameKey`       | `string`                      | —       | Override which key is used as the series name |

### ChartLegendContent [#chartlegendcontent]

| Prop       | Type      | Default | Description                                   |
| ---------- | --------- | ------- | --------------------------------------------- |
| `hideIcon` | `boolean` | `false` | Hide the color icon next to each label        |
| `nameKey`  | `string`  | —       | Override which key is used as the series name |

## Usage [#usage]

```tsx
import { Bar, BarChart, XAxis } from "recharts";
import type { ChartConfig } from "@/components/ui/chart";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

const config: ChartConfig = {
  sales: { label: "Sales", color: "hsl(var(--chart-1))" },
};

const data = [
  { month: "Jan", sales: 186 },
  { month: "Feb", sales: 305 },
  { month: "Mar", sales: 237 },
];

export function SalesChart() {
  return (
    <ChartContainer config={config} className="h-48 w-full">
      <BarChart data={data}>
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="sales" fill="var(--color-sales)" radius={4} />
      </BarChart>
    </ChartContainer>
  );
}
```

## Specs [#specs]

```md
# Mint — Chart Specs

## Component
- name: chart
- file: registry/mint/chart.tsx
- installs to: components/ui/chart.tsx
- dependencies: recharts
- registryDependencies: none

## What is it
A composable Recharts integration that handles color theming and layout boilerplate.
ChartContainer wraps Recharts' ResponsiveContainer and injects per-series colors as
scoped CSS custom properties. Use it whenever you need a consistently themed chart;
do not use it if you need a fully custom Recharts setup that manages its own container.

## Visual identity
Tooltip floats on the page background with a soft, glassy border and xl shadow,
now with Mint's generous rounded corners, giving it a card-like appearance.
Legend swatches use 2px-rounded squares. Axis tick text is rendered in
--muted-foreground to keep it recessive. Series colors come entirely from
ChartConfig, so each theme can define its own palette — the chart component
itself carries no fixed color bias.

## Design tokens
--muted-foreground: oklch(0.52 0.06 155) / oklch(0.6 0.06 155)   — axis tick text, series labels in tooltip
--border: oklch(0.88 0.04 155 / 60%) / oklch(0.32 0.05 155 / 40%) — tooltip border, cartesian grid lines
--background: oklch(1 0 0) / oklch(0.145 0 0)             — tooltip surface (bg-background)
--foreground: oklch(0.145 0 0) / oklch(0.985 0 0)         — tooltip value text
--muted: oklch(0.96 0.02 155) / oklch(0.2 0.03 155)       — tooltip cursor rectangle fill

## Sub-components
- ChartContainer        → root div; wraps ResponsiveContainer and provides ChartContext
- ChartStyle            → injects scoped --color-{key} CSS vars per ChartConfig entry
- ChartTooltip          → re-export of recharts Tooltip (pass as the tooltip prop)
- ChartTooltipContent   → styled tooltip body with indicator, label, and value rows
- ChartLegend           → re-export of recharts Legend (pass as the legend prop)
- ChartLegendContent    → styled legend row with color swatches and labels

## External dependencies
- recharts: provides ResponsiveContainer, Tooltip, Legend, and all chart primitives

## States
- active tooltip:  ChartTooltipContent renders only when active=true and payload is non-empty
- nestLabel:       when payload has exactly one item and indicator is not "dot", the category
                   label moves inside the value row instead of appearing above it

## Conventions
- Always set an explicit height on ChartContainer (e.g. h-48, h-64); width defaults to 100%
- Pass all chart data to the Recharts chart component (BarChart, AreaChart, etc.) — not to ChartContainer
- Do not nest a second ResponsiveContainer inside ChartContainer
- Use hsl(var(--chart-1)) through hsl(var(--chart-5)) in ChartConfig for theme-consistent series colors
- Use the theme key instead of color in ChartConfig when light and dark values must differ
- Use nameKey on ChartTooltipContent / ChartLegendContent to disambiguate series when dataKey differs from the config key
- Sub-components expose data-slot="chart" on ChartContainer for CSS targeting
```

## Installation [#installation]

<CommandBox componentName="chart" className="mt-2" />