Overview

"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { LineSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair } from "@reincharts/coordinates";
import { Legend } from "@reincharts/tooltip";
import {
    type Drawing,
    Drawings,
    DrawingStyleToolbar,
    DrawingToolbar,
    useDrawings,
    ZoomButtons,
} from "@reincharts/interactive";
import { weather, type WeatherDay } from "@/lib/data-general";
import { useDocsChartTheme } from "@/lib/use-docs-theme";

const last = weather.length - 1;
// a point on the day `back` days before the last one
const at = (back: number, value: number) => ({ time: weather[last - back].date.getTime(), price: value });

// lines, freehand, shapes, text and measurements
const tools = [
    "trendLine",
    "ray",
    "extendedLine",
    "infoLine",
    "arrow",
    "horizontalLine",
    "horizontalRay",
    "verticalLine",
    "crossLine",
    "brush",
    "highlighter",
    "rectangle",
    "ellipse",
    "triangle",
    "path",
    "text",
    "callout",
    "priceRange",
    "dateRange",
    "dateAndPriceRange",
];

const defaultDrawings: Drawing[] = [
    { id: "trend", type: "trendLine", pane: "main", points: [at(201, 6.3), at(164, 13.2)], style: {} },
    {
        id: "summer",
        type: "rectangle",
        pane: "main",
        points: [at(131, 23.6), at(86, 16.4)],
        style: { color: "#f59e0b", fill: "rgba(245, 158, 11, 0.1)" },
    },
    {
        // a highlighter stroke over the first cold spell
        id: "highlight",
        type: "highlighter",
        pane: "main",
        points: Array.from({ length: 11 }, (_, i) => at(31 - i, weather[last - 31 + i].temp)),
        style: { color: "rgba(255, 193, 7, 0.4)", width: 14 },
    },
    {
        id: "note",
        type: "callout",
        pane: "main",
        points: [at(25, 12.3), at(70, 8)],
        style: { text: "First cold spell" },
    },
];

export default function DrawingTools() {
    const theme = useDocsChartTheme();
    const drawings = useDrawings({ defaultDrawings });
    return (
        <div className="flex size-full">
            {/* left toolbar: tool groups, magnet, keep drawing, lock, hide, remove */}
            <DrawingToolbar controller={drawings} tools={tools} />
            <div className="min-w-0 flex-1">
                <ChartCanvas data={weather} theme={theme} barSpacing={3}>
                    <Pane id="main">
                        <Grid />
                        <LineSeries<WeatherDay> name="Mean temperature" y="temp" curve="monotone" />
                        <YAxis tickFormat={(t) => `${t.label}°`} />
                        <Legend />
                    </Pane>
                    <XAxis />
                    <Crosshair />
                    <Drawings controller={drawings} />
                    {/* floating style editor for the selected drawing */}
                    <DrawingStyleToolbar controller={drawings} />
                    <ZoomButtons />
                </ChartCanvas>
            </div>
        </div>
    );
}

@reincharts/interactive turns any chart into a canvas users can mark up: a toolbar, selection and editing, magnet, undo / redo, copy / paste, JSON save / load, crossing alerts and an API for your own tools. Drawings are rendered on the chart canvas and stay anchored to the data while users pan and zoom; the toolbars are plain DOM.

SetupCopy Anchor Link

Import the toolbar stylesheet once, create a controller with useDrawings, and render three components:

import { ChartCanvas, Pane } from "@reincharts/core";
import { LineSeries } from "@reincharts/series";
import { Drawings, DrawingStyleToolbar, DrawingToolbar, useDrawings } from "@reincharts/interactive";
import "@reincharts/interactive/styles.css";

function Chart({ data }: { data: { date: Date; temp: number }[] }) {
  const drawings = useDrawings({ defaultDrawings: [] });
  return (
    <div style={{ display: "flex", height: 520 }}>
      <DrawingToolbar controller={drawings} />
      <ChartCanvas data={data}>
        <Pane id="main">
          <LineSeries y="temp" />
        </Pane>
        <Drawings controller={drawings} />
        <DrawingStyleToolbar controller={drawings} />
      </ChartCanvas>
    </div>
  );
}

• <DrawingToolbar> is the tool palette: tool groups with flyouts, favorites, cursor / eraser, magnet, keep drawing, lock all, hide all and remove all. Use tools to choose the tools and orientation="horizontal" to put it on top.
• <Drawings> renders and edits the drawings, each in the pane named by its pane (give your panes stable ids).
• <DrawingStyleToolbar> floats above the selected drawing: color, width, dash, fill, text and extend controls.
• The toolbars follow a .dark / data-theme="dark" ancestor, or take theme, and are styled with --rc-* CSS variables.

ToolsCopy Anchor Link

The Freehand group is for marking up a chart by hand: the brush draws smooth strokes, the highlighter thick translucent ones. Price charts get extra tools (Fibonacci, channels, positions, price labels): see financial drawing tools. Pass tools to show only the tools you need:

<DrawingToolbar controller={drawings} tools={["trendLine", "horizontalLine", "brush", "highlighter", "text"]} />

EditingCopy Anchor Link

• Draw: pick a tool and click each point (paths: click points, double-click or Enter to finish; brush and highlighter: drag).
• Select: click a drawing; Shift-click adds to the selection. Drag the body to move, drag handles to reshape.
• Magnet: "weak" snaps to nearby series values, "strong" always snaps. Hold Ctrl / Cmd to invert it while drawing or dragging.
• Constrain: hold Shift while drawing lines to snap to 45° angles.
• Keep drawing: stay in the tool after finishing a drawing.
• Lock / hide: lock or hide all drawings from the toolbar; locked drawings can be selected but not moved.
• Order: bringToFront / sendToBack on the controller.

Keyboard shortcutsCopy Anchor Link

Saving & loadingCopy Anchor Link

A drawing is plain JSON: anchor points in data units (time is the x value, price the y value on the pane's scale) plus a style, so drawings survive reloads, zoom and new data.

const drawing: Drawing = {
  id: "trend-1",
  type: "trendLine",
  pane: "main",
  points: [
    { time: Date.UTC(2026, 3, 13), price: 6.3 },
    { time: Date.UTC(2026, 4, 20), price: 13.2 },
  ],
  style: { color: "#2962ff", width: 2 },
};

useDrawings(options) returns a controller with the state (drawings, selectedIds, activeTool, magnet...) and methods: setTool, add, update, removeSelected, removeAll, lockAll, hideAll, copy, paste, undo, redo, toJSON, load... Save with drawings.toJSON() and restore with drawings.load(saved). It works uncontrolled (defaultDrawings) or controlled (drawings + onChange, for React state or your store); see Saving & loading. Tool defaults (a ray's extend: "right", the highlighter's width) are merged only into drawings created from the toolbar or with add; drawings passed to defaultDrawings or load are drawn with exactly the style they carry. Event callbacks: onCreate, onUpdate, onRemove, onSelect, onCross (see Alerts).

Controller, state and tool registryCopy Anchor Link

• useDrawings wraps createDrawingController(options), a framework-agnostic store. Pass the controller to child components and read its state there with useDrawingState(controller) (for a custom toolbar, a drawing list, an undo button...).
• The built-in tools are exported as builtinTools (toolbar order), grouped as lineTools, freehandTools, fibTools, shapeTools, annotationTools and measureTools, with labels in toolGroups. Each tool also has its own export (trendLine, brush, fibRetracement...).
• useDrawings({ builtinTools: false, tools: [...] }) registers only your tools; defaultStyle applies a style to every new drawing, DRAWING_COLORS is the style toolbar's swatch palette.

function UndoButton({ controller }: { controller: DrawingController }) {
  const { canUndo } = useDrawingState(controller);
  return (
    <button disabled={!canUndo} onClick={() => controller.undo()}>
      Undo
    </button>
  );
}

Custom toolsCopy Anchor Link

A tool is a plain object built with defineTool: how many points the user places, how to draw it and how to hit-test it. Custom tools get the toolbar button, magnet, editing, undo / redo and persistence for free; see Custom drawing tool.