Rectangle tool

Draw and edit bounded rectangular regions on a chart. This feature belongs to @revolist/charts and can be used without Pivot or a grid.

Try it live

Choose Rectangle in the toolbar, drag across the plot, and choose Save. Select a saved region to move or resize it; the coordinate form can set exact endpoints, fill and opacity. Use Reset example annotations to restore the starting region.

Rectangles mark an X-and-Y region. For an axis-wide threshold range, use a reference band instead.

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: {
  editable: true,
  shapes: [{ id: 'campaign-window', kind: 'rectangle',
    from: { x: { scale: 'time', value: Date.UTC(2026, 3, 1) }, y: 80 },
    to: { x: { scale: 'time', value: Date.UTC(2026, 7, 1) }, y: 125 },
    color: '#6647f0', fill: '#6647f0', opacity: 0.15,
  }],
} });

Support and behavior

Uses the same Cartesian drawing support as Select. Endpoints use matching time, numeric or semantic category coordinates. Category offsets are expressed in category intervals. Rectangles are clipped to the plot and never expand the axis domain.

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