# Chart

Compose responsive Recharts charts with shared colors, tooltips, and legends.

## Install

```sh
npx shadcn@4.21.0 add lr-run/dir-ui/chart#v0.1.3
```

[Registry item with source and dependencies](https://github.com/lr-run/dir-ui/blob/v0.1.3/registry.json)

Requires React 19, Tailwind CSS 4 and shadcn initialized with Base UI. Registry target placeholders resolve through components.json: @ui, @components, @hooks and @lib. Imports below use the conventional @/ prefix for illustration; the CLI rewrites them to your configured aliases. Shared components are installed once through registryDependencies. The installer merges shared theme rules into the stylesheet configured in components.json. Existing files are never forcibly overwritten; review CLI conflicts before accepting changes. No Dir runtime is required.

## ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig

```tsx
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig } from '@/components/ui/chart.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| ChartContainer.config | ChartConfig | Required | Labels, icons, and colors keyed by series dataKey. |
| ChartContainer.children | ReactElement | Required | A Recharts chart such as BarChart or LineChart. |
| ChartContainer.className / style | string / CSSProperties | aspect-video | Set an explicit height or aspect ratio; the chart fills its container. |
| ChartContainer.initialDimension | { width: number; height: number } | { width: 320, height: 200 } | Initial size before measurement. |
| ChartContainer.id / aria-label | string | — | Optional unique chart ID and accessible description. |
| ChartTooltip.content | ReactElement | — | Pass <ChartTooltipContent />. Other props match Recharts Tooltip. |
| ChartTooltipContent.indicator | 'dot' \| 'line' \| 'dashed' | 'dot' |  |
| ChartTooltipContent.hideLabel / hideIndicator | boolean | false |  |
| ChartTooltipContent.nameKey / labelKey | string | — | Resolve series names or the title from a payload key. |
| ChartTooltipContent.formatter | Recharts Tooltip formatter | — | Custom rendering of a series row. |
| ChartTooltipContent.labelFormatter | Recharts Tooltip labelFormatter | — | Custom title rendering. |
| ChartTooltipContent.color | string | — | Override the indicator color. |
| ChartTooltipContent.className / labelClassName | string | — |  |
| ChartLegend.content | ReactElement | — | Pass <ChartLegendContent />. Other props match Recharts Legend. |
| ChartLegendContent.hideIcon | boolean | false | Use a color swatch instead of a configured icon. |
| ChartLegendContent.nameKey | string | — | Resolve series configuration from a payload key. |
| ChartLegendContent.verticalAlign | 'top' \| 'middle' \| 'bottom' | 'bottom' | Adjust legend spacing; set position on ChartLegend. |
| ChartLegendContent.className | string | — |  |

```ts
type ChartConfig = Record<string, {
  label?: React.ReactNode
  icon?: React.ComponentType
} & (
  | { color?: string; theme?: never }
  | { color?: never; theme: { light: string; dark: string } }
)>
```

Tooltip and legend content must be rendered inside ChartContainer. Data, axes, series, and accessibilityLayer use Recharts props.

## ChartFrame

```tsx
import { ChartFrame } from '@/components/charts/chart-frame.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| config | ChartConfig | {} | Shared series configuration passed to ChartContainer. |
| label | string | Required |  |
| children | ReactElement | Required | A Recharts chart element. |
| height | number | 230 |  |
| empty / loading | boolean | false |  |
| error | string | — |  |

Pass a Recharts chart as children. State priority is error, loading, then empty.

## RevenueBars

```tsx
import { RevenueBars } from '@/components/charts/index.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| values | ChartPoint[] | Required | An empty array displays the empty state. |

```ts
type ChartPoint = { label: string; value: number; secondary?: number }
```

Amounts use JPY.

## TrendChart

```tsx
import { TrendChart } from '@/components/charts/index.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| values | ChartPoint[] | Required |  |
| names | [string, string?] | Required | Provide a second name to display the secondary series. |
| height | number | 230 |  |

```ts
type ChartPoint = { label: string; value: number; secondary?: number }
```

Amounts use JPY. An empty array displays the empty state.

## HorizontalBars

```tsx
import { HorizontalBars } from '@/components/charts/index.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| values | ChartPoint[] | Required |  |
| height | number | 220 |  |
| labelWidth | number | 80 |  |

```ts
type ChartPoint = { label: string; value: number; secondary?: number }
```

Amounts use JPY. An empty array displays the empty state.

## SparkChart

```tsx
import { SparkChart } from '@/components/charts/index.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| values | ChartPoint[] | Required |  |

```ts
type ChartPoint = { label: string; value: number; secondary?: number }
```

Amounts use JPY. The chart is 80×24 pixels; an empty array renders no bars.

## ChartTooltip

```tsx
import { ChartTooltip } from '@/components/charts/chart-frame.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| active | boolean | false |  |
| label | string \| number | — |  |
| payload | readonly { name?: string \| number; value?: string \| number; color?: string }[] | — |  |

Renders nothing when active is false or payload is empty.

## ChartLegend

```tsx
import { ChartLegend } from '@/components/charts/chart-frame.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| items | { name: string; color: string }[] | Required |  |