chart.measure

Configuration Structure

chart: {
  measure: { ... },
    enabled: boolean,
    mode: 'span' | 'free',
    key: string,
    pinOnRelease: boolean,
    colors: { ... },
      up: string,
      down: string,
      neutral: string,
      guide: string,
    band: boolean,
    guides: boolean,
    markers: boolean,
    format: { ... },
      x: Function,
      y: Function,
      percent: Function,
    label: Function,
}

The measure options add a measure/delta ruler. Hold key and drag from A to B on the plot (or call chart.startMeasure()) to read the change, percent change, range, and slope between two points in data space. On release the ruler pins as a data-anchored overlay that re-projects on zoom and resize. It needs the measure feature (import 'apexcharts/features/measure') and fires the measured event. See the Measure ruler guide. It is part of the chart configuration.

enabled

chart.measure.enabled
Default: false

Enable the measure tool. Requires import 'apexcharts/features/measure'.

mode

chart.measure.mode
Default: 'span'
  • span (default): a finance-style vertical band between two x-positions with a change / percent / range readout, endpoints snapped to the first series.
  • free: a diagonal ruler between two arbitrary points.

key

chart.measure.key
Default: 'm'

The key held to arm a drag when not driving the ruler from code.

pinOnRelease

chart.measure.pinOnRelease
Default: true

Pin the ruler as a persistent, data-anchored overlay when the drag is released. It re-projects when the chart is zoomed or resized.

colors

chart.measure.colors

Semantic colors for the readout as { up, down, neutral, guide }. Every element also carries a stable CSS class plus a direction class (apexcharts-measure-up / -down / -flat) for stylesheet theming through --apx-measure-* tokens.

band

chart.measure.band
Default: true

Span mode: draw the shaded band between the two x-positions.

guides

chart.measure.guides
Default: true

Span mode: draw the vertical dashed reference lines at each endpoint.

markers

chart.measure.markers
Default: true

Draw the endpoint dots on the series line.

format

chart.measure.format

Value formatters for the readout: { x, y, percent }, each a function returning a string.

label

chart.measure.label

Full readout override. A function that receives the measure info (from, to, dx, dy, percentChange, slope, mode) and returns a string or an array of lines.