Measure Ruler

The measure ruler lets you read the change, percent change, range, and slope between two points directly on the plot. Arm it from the toolbar, pre-select it so the plot loads ready to measure (toolbar.autoSelected: 'measure'), or hold the measure key, then drag from A to B, and on release the ruler pins as a data-anchored overlay that re-projects when you zoom or resize.

Enable the feature

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

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

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: price moves on a candlestick, before/after on a KPI line, the gap between two peaks. For a fixed callout you set in code, an annotation is simpler; the ruler is for ad-hoc, user-driven measurement. Try the Measure ruler demo.

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