Chart — dir/ui

Compose responsive Recharts charts with shared colors, tooltips, and legends.
# 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.2
```

[Registry item with source and dependencies](https://github.com/lr-run/dir-ui/blob/v0.1.2/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. Theme CSS is imported by the UI modules. 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 |  |