Quick Start
Render your first interactive chart in a few lines.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { AreaSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair } from "@reincharts/coordinates";
import { Tooltip } from "@reincharts/tooltip";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
// any array of objects works: here, 90 days of page views
const data = Array.from({ length: 90 }, (_, i) => ({
date: new Date(2026, 0, 1 + i),
views: Math.round(1200 + 400 * Math.sin(i / 8) + i * 9 + ((i * 37) % 11) * 25),
}));
export default function QuickStart() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={data} theme={theme} initialView="fit" rightOffset={0}>
<Pane>
<Grid />
<AreaSeries name="Page views" y="views" curve="monotone" />
<YAxis />
<Tooltip />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}Prepare your data
A chart takes an array of objects, sorted by x (oldest first for time data). The x value is read from date, time
or x by default, and series read their values with accessors, so any shape works:
const data = [
{ date: new Date(2026, 0, 1), views: 1200 },
{ date: new Date(2026, 0, 2), views: 1340 },
// ...
];Add a ChartCanvas
<ChartCanvas> owns the data, the x axis viewport and the render loop. Without width and height it fills its
parent, so give the parent a size.
import { ChartCanvas } from "@reincharts/core";
<div style={{ height: 400 }}>
<ChartCanvas data={data}>{/* panes, series, axes */}</ChartCanvas>
</div>;Add a pane, a series and axes
A <Pane> is a vertical slot with its own y scale. Put series, a <YAxis>, a <Grid> and a <Tooltip> inside it.
The <XAxis> and <Crosshair> belong to the whole chart, so they go directly inside <ChartCanvas>.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { AreaSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair } from "@reincharts/coordinates";
import { Tooltip } from "@reincharts/tooltip";
export function ViewsChart({ data }: { data: { date: Date; views: number }[] }) {
return (
<ChartCanvas data={data} initialView="fit">
<Pane>
<Grid />
<AreaSeries name="Page views" y="views" curve="monotone" />
<YAxis />
<Tooltip />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}Interact
Drag to pan, scroll or pinch to zoom, drag the y axis to scale it and double-click it to fit again. Arrow keys,
+ / -, Home and End work when the chart has focus. See Interaction.