Introduction

Reincharts is a library of composable components to build interactive charts: lines, areas, bars (vertical and horizontal), scatter and bubble charts on numeric, time or category axes, all with pan, zoom, crosshairs, tooltips, legends, annotations and drawing tools out of the box. The same engine also powers a complete set of financial charts: candlesticks, 30+ indicators, Fibonacci and position tools and a ready-made trading chart component.

"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { AreaSeries, LineSeries } 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";

const data = Array.from({ length: 30 }, (_, i) => ({
    day: new Date(2026, 8, i + 1),
    visitors: Math.round(2200 + 900 * Math.sin(i / 4) + i * 40),
    returning: Math.round(900 + 300 * Math.cos(i / 5) + i * 18),
}));
type Row = (typeof data)[number];

export default function TooltipExample() {
    const theme = useDocsChartTheme();
    return (
        <ChartCanvas data={data} theme={theme} xAccessor={(d) => d.day} initialView="fit" rightOffset={0}>
            <Pane>
                <Grid />
                <AreaSeries<Row> name="Visitors" y="visitors" curve="monotone" />
                <LineSeries<Row> name="Returning" y="returning" curve="monotone" color="#f59e0b" />
                <YAxis />
                {/* a card next to the pointer with every series at the hovered day */}
                <Tooltip />
            </Pane>
            <XAxis />
            <Crosshair horizontal={false} xLabel={false} />
        </ChartCanvas>
    );
}

Everything is drawn on <canvas> by one small engine, so a chart with tens of thousands of points still pans and zooms smoothly. Components are plain React: you compose a chart from a <ChartCanvas>, one or more <Pane>s, series, axes and overlays.

<ChartCanvas data={data}>
  <Pane>
    <AreaSeries y="visitors" />
    <YAxis />
    <Tooltip />
  </Pane>
  <XAxis />
  <Crosshair />
</ChartCanvas>

When to use itCopy Anchor Link

• Dashboards and data apps that need more than static pictures: zoomable time series, synced charts, live data, thresholds and annotations.
• Large or streaming datasets, where SVG chart libraries slow down.
• Trading and finance apps, from a single candlestick chart to a full trading terminal.

PackagesCopy Anchor Link

Install only the packages you use (recommended), or the umbrella package reincharts, which re-exports all of them.

Why ReinchartsCopy Anchor Link

• Free and MIT. No license key, no watermark, no usage limits.
• Fast. One render loop, two canvas layers, and only the visible points are touched each frame.
• Composable. Every series, axis and tool is a component. Writing your own takes a single hook.
• Typed. Strict TypeScript, generic over your data type, with every prop documented in the API reference.