ApexCharts 6.1.0
A focused follow-up to 6.0. The Measure ruler graduates into a first-class toolbar tool you can pre-select, toolbar tools can now be toggled off, and two interaction bugs are fixed. Everything is backward compatible: existing configs render unchanged.
✨ Features
Measure ruler in the toolbar
The measure / delta ruler (shipped in 6.0) is now a built-in toolbar tool, so it can be armed with a click instead of holding the measure key. The button appears automatically whenever the ruler is enabled, and can be pre-selected so the plot loads ready to measure.
import ApexCharts from 'apexcharts'
import 'apexcharts/features/measure'
const options = {
chart: {
measure: { enabled: true },
toolbar: {
autoSelected: 'measure', // pre-select the ruler on load
tools: { measure: true }, // default; set false to keep it key-only
},
},
}- The button shows only when
chart.measure.enabledis true.tools.measureacceptstrue/falseor a custom SVG string, like the other tools. toolbar.autoSelectednow also accepts'measure', so the plot loads armed and ready to drag with no key held and no click. Themkey still works.- Selecting the ruler is mutually exclusive with zoom / pan / selection. The icon matches the rest of the toolbar and follows the light / dark themes.
🔧 Behavior changes (on by default)
Toolbar tools toggle off on re-click
Clicking an already-selected zoom, pan, selection, or measure icon now deselects it, leaving the chart with no active tool. Previously those buttons were one-way (clicking the active tool did nothing). This makes the ruler's on / off state obvious and lets you drop back to a plain, gesture-free chart.
TypeScript
toolbar.tools.measure, the 'measure' value for toolbar.autoSelected, and the toolbar.measure locale string are all typed.