# Migrating from Recharts
URL: /diagrammatic/docs/migrating-from-recharts
Map a Recharts dashboard onto diagrammatic forms, sizing, axes, tooltips, color, and legends.
> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.
A working map from a Recharts dashboard to `diagrammatic`, written from the parts that actually differ.
Two differences drive everything else. A recharts chart is a client component that measures its container and renders in pixel space; a diagrammatic chart is a server component that renders in pixel space at a stated `width`, so size is a host decision rather than a measurement and only a fluid box needs the client. And a recharts tooltip receives the row; a diagrammatic tooltip receives an address into the data the host already has.
## Forms
| recharts | diagrammatic |
| -------------------------------------- | ---------------------------------------------------------------------- |
| `AreaChart` with one `Area` | `Area data` |
| `AreaChart` with several `Area` | `Area series` |
| `AreaChart` with `stackId` | `StackedArea` |
| `LineChart` | `Line data` or `Line series` |
| `BarChart` | `Column`, or `Bar` for a ranked horizontal breakdown |
| `BarChart layout="vertical"` | `Bar` |
| `BarChart` with `stackId` | `StackedBar`, plus `normalize` for percent |
| several `Bar` side by side | `GroupedBar` |
| `PieChart` with `innerRadius` | `Pie inner center centerLabel`, plus `legend={false}` for a DOM legend |
| `Treemap` | `Treemap root` |
| `ScatterChart` with `ZAxis` | `Scatter points[].size` |
| `Scatter` with a `Cell` per category | `Scatter points[].series` |
| `RadarChart` | `Radar` |
| `FunnelChart` | `Funnel` |
| a hand-rolled hour by weekday grid | `Heatmap mark="dot"` |
| a hand-rolled contribution calendar | `Heatmap mark="calendar"` |
| a hand-rolled composition bar | `SplitBar items block` |
| a hand-rolled label truncation | nothing: labels are cut to their margin |
| `ResponsiveContainer` | `width` and `height`, or `Fit` when the width is fluid |
| `CartesianGrid` plus `YAxis tickCount` | `yTicks={4}` |
| `XAxis ticks={...}` | `labels`, one per tick you want printed |
| `XAxis tick={{ fontSize: 12 }}` | `fontSize={12}` on the chart, every role follows |
| `Tooltip content` | `Root` plus `Tooltip`, looking the row up by `datum.index` |
| `Legend` | automatic, or `legend={false}` plus the DOM `Legend` |
| `isAnimationActive={false}` | nothing to turn off |
## Sizing
```
…
```
becomes, when the card width is known:
```
```
and when it is not:
```
{({ width }) => (
)}
```
Both render in CSS pixels, so the tick labels are 11px whatever the width, and a `fontSize` on the chart is the one knob when the host's small text is another size. A figure given `width` alone takes its height from `aspect`; a figure given both ignores `aspect`. Without any of them a figure is 640 wide and shrinks, whole, inside a narrower host.
The chart text inherits the page font, so the `font-family` a recharts host set through a wrapper class is simply gone.
## Axes
A recharts axis draws itself and formats its own ticks. Here the value axis is opt-in and the category axis is a list of strings.
```
// recharts
r.date)} tickFormatter={fmtDay} />
// diagrammatic
```
`labels` are spread evenly across the plotted span, so pass as many as you want printed rather than one per point. The widest printed tick sizes the value gutter, so `YAxis width` has no counterpart. `yTicks` on log paper counts in decades; `decades()` helpers in the host can be deleted.
## Tooltips
The tooltip surface stays yours. What changes is where the values come from: the mark carries `data-i` and `data-series`, and the host reads its own row.
```
"use client";
import { Root, Tooltip } from "diagrammatic/interactive";
{({ datum }) => {
const row = rows[datum.index ?? 0];
if (!row) return null;
return (
{fmtDay(row.date)}
{series.map((s) => (
|
))}
);
}}
;
```
`datum.series` names the hovered series when the form has several, `datum.index2` addresses the second dimension of a grid, and `getSeriesColor(datum.element, name)` reads the rendered color for a swatch. A recharts `payload` mapper that formatted values inline becomes one lookup plus the formatting the host already owns.
Click and selection ride the same delegation: `onMarkClick` replaces a `Bar onClick`, and `highlight` replaces a selected-index style prop.
```
router.push(rows[datum.index ?? 0].href)}
highlight={selected == null ? null : { index: selected }}
>
```
## Color
A shadcn/ui host imports the shipped bridge once:
```
import "diagrammatic/shadcn.css";
```
It maps `--dg-c1` through `--dg-c5` to `--chart-1` through `--chart-5`, ink to `--foreground`, muted to `--muted-foreground`, grid to `--border`, and surface to `--background`. Any other system writes the same lines:
```
[data-dg],
[data-dg-legend] {
--dg-c1: var(--chart-1);
--dg-c2: var(--chart-2);
--dg-c3: var(--chart-3);
--dg-c4: var(--chart-4);
--dg-c5: var(--chart-5);
--dg-grid: var(--color-border);
--dg-muted: var(--color-muted-foreground);
}
```
A ` | ` per datum disappears: color follows the series or the category (`points[].series` on a scatter, `categorical` on a bar) and comes from the palette. The palette is seven categories; a host with an eighth ranks and folds the tail into `Other`. The `ChartConfig` that shadcn's wrapper needs to name and color each key becomes nothing: names come from the data and colors from the tokens.
## Legends
A recharts `Legend` is HTML positioned over the plot. Here the built-in legend is drawn inside the figure, and the DOM `Legend` is the counterpart on the page's own type:
```
import { Area, Legend } from "diagrammatic";