Arrow tool

Point to an event or observation with a directional annotation. This feature belongs to @revolist/charts and can be used without Pivot or a grid.

Try it live

Choose Arrow, drag toward the location you want to emphasize, then Save. The arrowhead points toward the end coordinate. Select the saved arrow and move its body or either endpoint; use Coordinates for exact positions.

Use a note when you also need an explanation.

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": "arrow",
        "from": {
          "x": {
            "scale": "time",
            "value": 1772323200000
          },
          "y": 100
        },
        "to": {
          "x": {
            "scale": "time",
            "value": 1782864000000
          },
          "y": 135
        }
      }
    ]
  }
});

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

API and configuration

await chart.update({ annotations: { editable: true, shapes: [{
  id: 'growth-arrow', kind: 'arrow',
  from: { x: { scale: 'time', value: Date.UTC(2026, 2, 1) }, y: 100 },
  to: { x: { scale: 'time', value: Date.UTC(2026, 6, 1) }, y: 135 },
  color: '#6647f0',
}] } });

Support and behavior

Requires native Cartesian annotation geometry. Arrow direction follows the authored endpoints. It does not modify source observations or create dependencies between them.

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