Select, move & resize

Edit committed annotations with the shared drawing toolbar. This feature belongs to @revolist/charts and can be used without Pivot or a grid.

Try it live

The Select pointer edits annotation shapes. It is separate from data selection, which selects observations. This example starts with a saved rectangle.

1. Choose Select, then click the rectangle to open its editor and handles.
2. Drag its body to move it or a corner to resize it. Expand Coordinates for exact values.
3. Choose Save to commit, Cancel or Escape to discard, or Delete to remove it.

Focus a handle and use arrow keys; Shift moves a larger step. Ctrl/Command+Enter saves the draft. New drawing returns to Select after placement. Unsaved drafts are disposed when data or viewport changes.

Reset example annotations

Loading chart…

Inspect live chart state

The chart uses the native Charts renderer. Buttons outside the plot are example application controls calling the public API.

Complete chart setup with sample data

Install Charts using the installation guide, then run this setup after the host mounts. The data is illustrative. Additional actions for this tool are explained below.

<div id="chart" style="width:100%;height:500px"></div>

import { createChartFactory } from '@revolist/charts/core';
import { lineChart } from '@revolist/charts/line';
import { groupedColumnChart } from '@revolist/charts/grouped-column';
import { columnLineChart } from '@revolist/charts/column-line';

const rows = [
  {
    "date": 1767225600000,
    "month": "Jan",
    "revenue": 65,
    "costs": 45
  },
  {
    "date": 1769904000000,
    "month": "Feb",
    "revenue": 82,
    "costs": 50
  },
  {
    "date": 1772323200000,
    "month": "Mar",
    "revenue": 76,
    "costs": 48
  },
  {
    "date": 1775001600000,
    "month": "Apr",
    "revenue": 95,
    "costs": 65
  },
  {
    "date": 1777593600000,
    "month": "May",
    "revenue": 110,
    "costs": 72
  },
  {
    "date": 1780272000000,
    "month": "Jun",
    "revenue": 102,
    "costs": 68
  },
  {
    "date": 1782864000000,
    "month": "Jul",
    "revenue": 121,
    "costs": 80
  },
  {
    "date": 1785542400000,
    "month": "Aug",
    "revenue": 115,
    "costs": 76
  },
  {
    "date": 1788220800000,
    "month": "Sep",
    "revenue": 135,
    "costs": 89
  },
  {
    "date": 1790812800000,
    "month": "Oct",
    "revenue": 128,
    "costs": 85
  },
  {
    "date": 1793491200000,
    "month": "Nov",
    "revenue": 145,
    "costs": 92
  },
  {
    "date": 1796083200000,
    "month": "Dec",
    "revenue": 155,
    "costs": 100
  }
];
const mapping = {
  "category": {
    "field": "date",
    "label": "month"
  },
  "series": [
    {
      "field": "revenue",
      "label": "Revenue"
    },
    {
      "field": "costs",
      "label": "Costs"
    }
  ]
};
const createChart = createChartFactory([lineChart, groupedColumnChart, columnLineChart]);
const container = document.getElementById('chart')!;
const chart = await createChart({
  container,
  data: rows,
  mapping,
  "chartType": "line",
  "axes": {
    "x": {
      "scale": "time"
    }
  },
  "presentation": {
    "title": "Monthly performance",
    "subtitle": "Illustrative data · 2026",
    "legendPosition": "bottom"
  },
  "interaction": {
    "mode": "select",
    "selectionMode": "multiple"
  },
  "annotations": {
    "editable": true,
    "shapes": [
      {
        "id": "example",
        "color": "#6647f0",
        "kind": "rectangle",
        "from": {
          "x": {
            "scale": "time",
            "value": 1775001600000
          },
          "y": 80
        },
        "to": {
          "x": {
            "scale": "time",
            "value": 1785542400000
          },
          "y": 125
        },
        "fill": "#6647f0",
        "opacity": 0.15
      }
    ]
  }
});

// When the host unmounts:
// chart.destroy();

API and configuration

await chart.update({
  annotations: { ...chart.model.annotations, editable: true },
});
// Read committed edits, including shapes, from the model.
const stop = chart.subscribe(model => console.log(model.annotations));
// Later: stop(); chart.destroy();

Support and behavior

Drawing needs a native chart with Cartesian plot geometry and annotation editing support. The toolbar is opt-in through annotations.editable; it is not a Pivot dependency. Polar and geographic drawing are not supported. Editing gestures claim the pointer so the same drag does not also pan the chart.

State and cleanup

Authored settings are available through chart.model. Updates replace whole settings objects: spread fields you want to retain, and await the returned promise before reading state or exporting. Destroy the controller when its host unmounts. Committed annotations appear in SVG/PNG/PDF output; CSV remains data-only. Shape IDs must be unique across shapes, references and datum notes. { annotations: {} } clears annotations and editing opt-in.

All chart tools · Chart types · Data & Configuration