Measure Ruler

A chart shows values, but the question people actually ask is usually about the difference between two of them: how much did this rise from the low, what is the percent move across this window, how steep is that trend. Answering it normally means reading two numbers off the axis and doing arithmetic in your head. The measure ruler does it on the plot. Drag from one point to another, the way a trader's measure tool works, and it reports the change, percent change, range, and slope between them. On release the ruler pins as a data-anchored overlay, so it stays locked to those data points and re-projects itself when you zoom or resize.

See it live

In the demo below, press Measure and drag from one point to another across the chart. A band reports the change and percent move, and the released ruler pins in place. (The same chart also demonstrates Ink draggable notes, the context menu, and Rewind undo.)

Drag a labelled point, right-click to add a note, or Measure across the chart.

Right-click the chart to open the context menu, then choose Add note here.

The Peak and Watch callouts are draggable (Ink); grab one and move it, and its new position is written back to annotations.points in data coordinates. Right-click anywhere on the chart to open the context menu and choose Add note here, which drops an editable note at that exact point; click any note to reopen its editor. Turn on Measure and drag to read a move; Undo reverses the last drag, edit, or measure via Rewind.

For how Measure fits with direct-manipulation annotations, see Direct-Manipulation Annotations: Ink and Measure.

Where it is useful

Price moves on a candlestick. Measure a swing from low to high and read the percent change without leaving the chart.
Before / after on a KPI line. Drag across a deployment or a campaign date to quantify the lift.
Peak-to-trough gaps. Read the range and slope between two features of a signal.
Ad-hoc questions. Anywhere a reader wants "how much, between here and there" that you did not anticipate with a fixed callout.

For a delta you know in advance and set in code, an annotation is simpler; the ruler is for user-driven, on-the-spot measurement.

Enable the feature

import ApexCharts from 'apexcharts'
import 'apexcharts/features/measure'

const options = {
  chart: {
    measure: { enabled: true, mode: 'span', key: 'm', pinOnRelease: true },
  },
}

Arm it from the toolbar, pre-select it so the plot loads ready to measure (toolbar.autoSelected: 'measure'), or hold the measure key and drag. See the chart.measure options for every field.

Two modes

span (default) is the finance-style vertical band between two x-positions, with a change / percent / range readout and endpoints snapped to the first series.
free is a diagonal ruler between two arbitrary points.

Drive it from code

You do not have to rely on the hold-and-drag gesture; the ruler has a full method API:

chart.startMeasure()  // begin a measurement
chart.stopMeasure()   // end the current measurement
chart.clearMeasures() // remove all pinned rulers

Each completed measurement fires the measured event with the two points, dx, dy, percentChange, and slope.

Styling

Ruler elements resolve their colors through --apx-measure-* CSS custom properties, and each element carries a stable class plus a direction class (apexcharts-measure-up / -down / -flat) so up moves and down moves can be themed differently from a stylesheet.

When to use it

Add the ruler to any chart where the exact delta between two points matters. It pairs naturally with Ink and the context menu, which offers a "Measure from here" verb at the clicked point. Try the Measure ruler demo.

Measure ships as a tree-shakeable entry point; see the tree-shaking guide.