apexcharts/apexcharts.js v5.16.0

💎 Version 5.16.0

on GitHub

✨ Features

Drilldown navigation (opt-in)

Click a data point to drill into a child level, with a breadcrumb trail and back navigation. Supported on bar, column, pie, donut, treemap, and heatmap. Tree-shakeable: import the feature and enable it.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/drilldown'

const options = {
  chart: {
    type: 'bar',
    drilldown: {
      enabled: true,
      series: [
        { id: 'fruits', name: 'Fruits', data: [{ x: 'Apple', y: 40 }, { x: 'Banana', y: 30 }] },
      ],
      // breadcrumb: { show: true, position: 'top-left', rootLabel: 'All' },
      // animation: { zoomFromPoint: true }, // unfold the child from the clicked point
      // onDrillDown: async ({ point }) => fetchChild(point), // async level loading
    },
  },
  series: [{ name: 'Categories', data: [{ x: 'Fruits', y: 70, drilldown: 'fruits' }, { x: 'Vegetables', y: 55 }] }],
}

• Child levels are declared inline in chart.drilldown.series, or fetched on demand via onDrillDown.
• Breadcrumb is configurable (position, separator, rootLabel, formatter) and includes a back-arrow.
• Optional animation.zoomFromPoint unfolds the child level outward from the clicked point (and folds back on drill-up).

Pie / donut external (outer) data labels with leader lines (opt-in)

Render each slice's name outside the pie, connected by a leader line, so users no longer need to map legend colors back to slices. Pie and donut only (ignored for polarArea). The percentage keeps rendering inside the slice.

plotOptions: {
  pie: {
    dataLabels: {
      external: {
        show: true,
        // formatter: (name, { percent }) => [name, percent.toFixed(1) + '%'],
        // connector: { show: true, width: 1, length: 16, gap: 6 },
      },
    },
  },
}

Scatter jitter: strip plots and overplotting (opt-in)

Spread overlapping scatter points apart. Two uses, one engine. Offsets are in axis units, deterministic (SSR-safe), and applied to the drawn positions only, so tooltips still show the true values.

• Strip plots: pass compact { x: 'Category', y: [v1, v2, ...] } data. Each category becomes a band and its values scatter horizontally within it. Every value is a real, hoverable marker; the sticky tooltip follows the hovered dot.
• Overplotting: on ordinary { x, y } data, add small random offsets so dense clusters fan out.

plotOptions: { scatter: { jitter: { enabled: true, x: 0.35 /*, y: 0, distributed: false */ } } },
series: [
  { name: 'Frankfurt', data: [{ x: 'Frankfurt', y: [120, 118, 130, 109, 142] }] },
  { name: 'Mumbai', data: [{ x: 'Mumbai', y: [182, 176, 195, 168, 201] }] },
]

Marker styling reuses the standard markers / colors / fill config; set jitter.distributed: true to color each band separately.

Data reducer for range charts

chart.dataReducer now downsamples rangeArea and rangeBar series via min-max bucket aggregation (preserving the visual extremes of each bucket), complementing the existing LTTB reduction for line/area.

chart: { dataReducer: { enabled: true, threshold: 500, targetPoints: 250 } }

🐛 Fixes

• Drilldown: reset the legend-collapse state when drilling so a child level is not rendered with a parent's series hidden.