# ComposedChart

Bars and lines over one axis — the volume, and the rate it moved at.

- Group: Charts
- Import: `import { ComposedChart } from '@misoto22/design/charts'`
- Page: https://ui.misoto22.com/components/composed-chart/
- Related: bar-chart, line-chart

## When to reach for it

Two measures that share a scale. Two that do NOT share one belong in two charts or indexed to a common base: there is no second y-axis here, on purpose.

## Accessibility

- title is required; the rows are also rendered as a visually hidden table.
- One value axis only. A dual-axis chart lets its author choose where the lines cross, which is the single most misleading thing a chart can do.
- enableHoverHighlight dims every bar outside the hovered column, driven by the chart’s own tooltip index.

## ComposedChart

Bars and lines over one axis — the shape for "the volume, and the rate it moved at". One axis, always. Two measures at different scales belong in two charts or indexed to a common base; a second y-scale lets the author choose where the lines cross, which is the single most misleading thing a chart can do.

### Props

- `config` (required) — `TConfig & ValidateKeys<TData, TConfig>`.
- `data` (required) — `TData[]`. The rows the chart draws. One entry per point, bar or category.
- `title` (required) — `string`. What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed.
- `showTitle` — `boolean`. Prints the title above the plot instead of hiding it from sight.
- `description` — `ReactNode`. A line under the title — the unit, the window, the caveat.
- `children` (required) — `ReactNode`. The composed parts — axes, grid, tooltip, legend, and the marks themselves.
- `className` — `string`. Merged onto the figure, last, so a call site can size or space it.
- `chartProps` — `ComponentProps<typeof RechartsComposedChart>`. Escape hatch onto the raw Recharts chart element.
- `curveType` — `ChartCurveType` default `'linear'`. How the line between two points is interpolated. Every mark inherits it unless it says otherwise.
- `animationType` — `ChartRevealType` default `'forward'`.
- `barGap` — `number`.
- `barCategoryGap` — `number`.
- `defaultSelectedDataKey` — `string | null` default `null`. The series lit on first render. Selection dims every other series.
- `onSelectionChange` — `(selectedDataKey: string | null) => void`. Fires when the selection changes, and with null when it is cleared.
- `isLoading` — `boolean` default `false`. Swaps the marks for an animated skeleton, keeping the measured height so the page does not jump when the data lands.
- `loadingBars` — `number`. How many bars the skeleton draws.
- `xDataKey` — `keyof TData & string`. The row field on the category axis. Needed by the brush and by the table view.
- `hideDataTable` — `boolean` default `false`. Drops the hidden table view. Only correct when the page prints the data itself.
- `empty` — `ChartEmptyProps | false`. What the chart shows when it has nothing to draw. Rendered instead of the plot whenever `data` is empty and the chart is not loading — the state a real dashboard reaches within a week, and the one an empty pair of axes is indistinguishable from a failed load. `false` keeps the axes, for a chart whose emptiness is itself the reading.

## Example — default

```tsx
import { ComposedChart, type ChartConfig } from '@misoto22/design/charts'

<ComposedChart title="Revenue and profit" config={config} data={data} xDataKey="month">
  <ComposedChart.Grid />
  <ComposedChart.XAxis dataKey="month" />
  <ComposedChart.YAxis />
  <ComposedChart.Legend />
  <ComposedChart.Tooltip />
  <ComposedChart.Bar dataKey="revenue" />
  <ComposedChart.Line dataKey="profit" />
</ComposedChart>
```

## Example — variants

```tsx
import { ToggleGroup, ToggleGroupItem } from '@misoto22/design'

<div className="flex w-full flex-col gap-4">
  <div className="flex flex-wrap gap-3">
    <ToggleGroup
      type="single"
      value={bar}
      onValueChange={(next) => next && setBar(next as BarVariant)}
      aria-label="Bar fill"
    >
      {BARS.map((option) => (
        <ToggleGroupItem key={option} value={option}>
          {option}
        </ToggleGroupItem>
      ))}
    </ToggleGroup>

    <ToggleGroup
      type="single"
      value={stroke}
      onValueChange={(next) => next && setStroke(next as AreaStrokeVariant)}
      aria-label="Line stroke"
    >
      {STROKES.map((option) => (
        <ToggleGroupItem key={option} value={option}>
          {option}
        </ToggleGroupItem>
      ))}
    </ToggleGroup>
  </div>

  <ComposedChart title="Revenue and profit" config={config} data={data}>
    <ComposedChart.Grid />
    <ComposedChart.XAxis dataKey="month" />
    <ComposedChart.Tooltip />
    <ComposedChart.Bar dataKey="revenue" variant={bar} />
    <ComposedChart.Line dataKey="profit" strokeVariant={stroke}>
      <ComposedChart.Dot variant="border" />
    </ComposedChart.Line>
  </ComposedChart>
</div>
```

## Example — hover highlight

```tsx
import { ComposedChart, type ChartConfig } from '@misoto22/design/charts'

<ComposedChart title="Revenue and profit" config={config} data={data}>
  <ComposedChart.Background variant="diagonal-lines" />
  <ComposedChart.XAxis dataKey="month" />
  <ComposedChart.Legend isClickable />
  <ComposedChart.Tooltip />
  <ComposedChart.Bar dataKey="revenue" enableHoverHighlight isClickable />
  <ComposedChart.Line dataKey="profit" glowing isClickable />
</ComposedChart>
```

## Example — brush and loading

```tsx
import { ComposedChart, type ChartConfig } from '@misoto22/design/charts'

<div className="grid w-full gap-8 lg:grid-cols-2">
  <ComposedChart title="Revenue and profit" showTitle config={config} data={data} xDataKey="day">
    <ComposedChart.Grid />
    <ComposedChart.XAxis dataKey="day" />
    <ComposedChart.Tooltip />
    <ComposedChart.Bar dataKey="revenue" variant="stripped" />
    <ComposedChart.Line dataKey="profit" />
    <ComposedChart.Brush height={48} />
  </ComposedChart>

  <ComposedChart title="Loading" showTitle config={config} data={[]} isLoading>
    <ComposedChart.Grid />
    <ComposedChart.Bar dataKey="revenue" />
  </ComposedChart>
</div>
```