Chart

Chart provides responsive Recharts composition with argv-styled tooltips, legends, and theme-aware series colors. It keeps chart configuration close to the data being displayed.

Use it to reveal comparisons, trends, and distributions that are easier to understand visually. When exact values matter, provide the same information in text or a table.

Live previewInteractive / Local

Installation

Sourcebash

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/chart.json

Usage

Sourcetsx

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

const config = {
    deployments: { label: "Deployments", color: "var(--primary)" }
} satisfies ChartConfig

<ChartContainer config={config} aria-label="Monthly deployments">
    <BarChart data={data}>
        <XAxis dataKey="month" />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="deployments" fill="var(--color-deployments)" />
    </BarChart>
</ChartContainer>

Configuration

Each ChartConfig key identifies a data series and defines its label and color. Keep the key aligned with the corresponding Recharts dataKey so the generated variables are easy to follow.

Set a single color when one value works in both themes. Use theme: { light, dark } when the series needs different colors for contrast. ChartContainer generates scoped --color-{key} variables for its descendants.

ChartTooltip and ChartLegend re-export their Recharts primitives. Pass ChartTooltipContent and ChartLegendContent through each primitive’s content prop to apply argv styling.

Tooltip content supports indicator="dot", "line", or "dashed", along with custom formatters, hidden labels, and hidden indicators.

Composition

Sourcetext

ChartContainer
└── Recharts chart
    ├── ChartTooltip
    │   └── ChartTooltipContent
    └── ChartLegend
        └── ChartLegendContent

API Reference

ChartContainer

Prop	Type	Default
`config`	`ChartConfig`	-
`initialDimension`	`{ width: number; height: number }`	`{ width: 320, height: 200 }`
`id`	`string`	generated
`className`	`string`	-

initialDimension gives Recharts a stable first render before the responsive container is measured.

ChartTooltipContent

Prop	Type	Default
`indicator`	`"dot"` \| `"line"` \| `"dashed"`	`"dot"`
`hideLabel`	`boolean`	`false`
`hideIndicator`	`boolean`	`false`
`nameKey`	`string`	-
`labelKey`	`string`	-

The component also accepts Recharts tooltip content props, including formatter and labelFormatter.

ChartLegendContent

Prop	Type	Default
`hideIcon`	`boolean`	`false`
`nameKey`	`string`	-
`verticalAlign`	Recharts legend alignment	`"bottom"`

ChartTooltip and ChartLegend are the corresponding Recharts primitives. ChartStyle is rendered by ChartContainer and usually does not need to be used directly.

Accessibility

Give every chart an accessible name that explains what it measures. Provide a text summary or table alternative when users need the exact values.

Do not distinguish series by color alone. Combine color with labels, patterns, indicators, or direct annotations whenever possible.