drilldown
Configuration Structure
drilldown: {}Opt-in navigation that lets a reader click a data point to open a child level, with a breadcrumb trail and back navigation. Works with bar, column, line, area, pie, donut, treemap, and heatmap. See the Drilldown guide for a walkthrough.
Requires the Drilldown feature, which is not in the default bundle since 8.0: add import 'apexcharts/features/drilldown' next to import ApexCharts from 'apexcharts', or add dist/features/drilldown.js on a script-tag page. The full bundle (apexcharts/full, apexcharts.full.min.js) has it. Without it, a chart with drilldown.enabled warns once in the console and draws its root level, which does not navigate. A sunburst or icicle reads a drilldown.series block as plain data and needs no drilldown feature.
enabled
falseMaster switch. When false the feature stays inert even if it was imported.
series
[]The child levels, each referenced by a data point's drilldown id. A level is an object shaped like this:
{
id: 'mobile', // matches a point's `drilldown` id
name: 'Mobile by OS', // breadcrumb label and single-series name
data: [ // single-series data (use this OR `series`)
{ x: 'iOS', y: 30, drilldown: 'mobile-ios' },
{ x: 'Android', y: 23 }
]
}
A level may also override the presentation applied while it is shown: chart (type, stacked, stackType), xaxis, yaxis, colors, plotOptions, fill, and legend.
id
Unique id referenced by a data point's drilldown field.
name
Display name used by the breadcrumb and as the single-series child series name.
data
Child data points for a single-series level. Use this or series, not both.
series
Full multi-series array for a grouped or stacked child level. Use this or data, not both.
onDrillDown
undefinedAsync resolver, called when a drillable point has no matching level in series. It receives a context object and returns a level, or a promise of one.
drilldown: {
enabled: true,
onDrillDown: async ({ id }) => {
const res = await fetch(`/api/breakdown/${id}`)
return { id, name: 'By region', data: await res.json() }
}
}
A failed fetch is ordinary, not exceptional, so it never strands the view. On a throw, a rejection, or a resolved value without a data array, the chart stays exactly where it was, the breadcrumb is untouched, nothing is cached, and drillDownError fires. That last case previously no-opped in silence, which is indistinguishable from "the click did nothing".
A second click while one request is in flight is ignored rather than starting a second request.
loading
Overlay shown while an async level resolves. Set to false to suppress it entirely.
It is theme-aware, carries role="status" with aria-live="polite", and its spinner flattens to a pulse under prefers-reduced-motion.
show
Available Options:
- true (default)
- false
text
Optional caption beside the spinner. With none, the spinner shows alone and carries "Loading" as its accessible name, so the default ships no user-visible English for you to translate.
cache
trueCache levels resolved by onDrillDown, keyed by id, so drilling back down a branch does not re-fetch.
Clear it with clearDrilldownCache() when the underlying data changes.
Available Options:
- true (default)
- false
marker
The dot marking a drillable point on a line or area chart drawn without markers.
A bar, slice, tile or cell is already a visible, clickable mark; a line point is not. With markers.size: 0 there is no element to click at all, and even with markers shown, core marks line and area markers no-pointer-events so the shared tooltip can track the plot. So the feature supplies a markers.discrete entry per drillable point: only those points carry a dot, and it reads as "these open".
Set show: false to supply your own affordance. Omitted colours inherit the series marker defaults.
show
trueAvailable Options:
- true (default)
- false
size
6Radius in pixels.
shape
undefinedAvailable Options:
- 'circle'
- 'square'
- 'rect'
Defaults to the series marker shape.
fillColor
undefinedDefaults to the series colour.
strokeColor
'#fff'Colour of the ring around the dot.
breadcrumb
The trail from the root level to the current one, with back navigation to any ancestor. Set breadcrumb: false to hide it and drive navigation yourself.
show
Show the breadcrumb trail.
position
Where the breadcrumb sits.
Available Options:
- top-left
- top-right
separator
String placed between breadcrumb levels.
rootLabel
Label for the top (root) level in the trail.
offsetX
Horizontal shift of the breadcrumb.
offsetY
Vertical shift of the breadcrumb.
formatter
Customise each breadcrumb label. Receives (label, { index, depth }) and returns the string to display.
animation
Controls the drill transition.
enabled
trueGate whether the drill transition animates at all.
zoomFromPoint
falseAnchor the transition at the clicked point so the child unfolds outward from it (and settles back on drill-up) instead of re-rendering. A gentle scale layered on the SVG.
speed
260Base transition duration in milliseconds, used only when zoomFromPoint is true.