A minor release built around four new chart types: streamgraph, waterfall, dumbbell and raincloud. Each is a thin layer over a renderer the library already trusts (rangeArea, rangeBar, violin), so they arrive with tooltips, legends, animations, exports and zooming already working, and they cost the default bundle little: streamgraph, waterfall and dumbbell together add about 12 KB gzipped. Raincloud is a Premium add-on and adds nothing unless you load it.
Also new: chart.print lays the chart out for the printed sheet. And six fixes, several of them years old.
| gzip | |
|---|---|
| 7.0.0 default bundle | 252,005 B |
| 7.1.0 default bundle | 264,326 B |
No breaking changes. Upgrading is npm install apexcharts@7.1.0.
✨ New
Streamgraph
chart.type: 'streamgraph' stacks the series as flowing bands around a baseline chosen to keep the whole picture readable: the baseline sits where the bands wiggle least, curves are monotoneCubic by default so a band never overshoots its data, and each band's name is drawn inside it, sized to the room that band actually has. Hovering a band fades the others; the legend and tooltip work as on any axis chart.
new ApexCharts(el, {
chart: { type: 'streamgraph' },
series: [
{ name: 'Drama', data: [{ x: '2024-01-01', y: 32 }, /* ... */] },
{ name: 'Comedy', data: [/* ... */] },
],
}).render()In the default bundle. For the lean-core channel it is import 'apexcharts/streamgraph' or dist/features/streamgraph.js.
Waterfall
chart.type: 'waterfall' accumulates the running total for you: the series holds the deltas, and a point flagged isSubtotal or isTotal draws the running total from zero at that position. Connectors bridge each bar to the next, and rising, falling and total bars take their own colors. Requested in #847.
series: [{
name: 'Operating income',
data: [
{ x: 'Net revenue', y: 8786000 },
{ x: 'Cost of sales', y: -2786000 },
{ x: 'Gross profit', isSubtotal: true },
{ x: 'Operating expenses', y: -1786000 },
{ x: 'Operating income', isTotal: true },
],
}]In the default bundle; apexcharts/waterfall / dist/features/waterfall.js for lean-core.
Dumbbell
chart.type: 'dumbbell' compares two or more measures per category: each series is one measure, and the chart joins them with a connector per category, without asking you to zip the values into [low, high] pairs by hand. Works horizontal and as columns.
series: [
{ name: '2020', data: [{ x: 'Backend', y: 92 }, /* ... */] },
{ name: '2025', data: [{ x: 'Backend', y: 118 }, /* ... */] },
]In the default bundle; apexcharts/dumbbell / dist/features/dumbbell.js for lean-core.
Raincloud
chart.type: 'raincloud' shows a distribution three ways at once: the half-violin is the shape, the box is the summary, and the rain underneath is the observations themselves. You hand it the raw values and it does the rest.
series: [{
name: 'Weight gain',
data: [{ x: 'Control', points: [/* raw observations */] }],
}]Raincloud is a Premium feature and an explicit import from either channel:
import 'apexcharts/raincloud'<script src=".../dist/features/raincloud.js"></script>Print layout
The paper box cannot be measured from JavaScript: clientWidth and matchMedia both report the screen during beforeprint. So chart.print re-lays the chart out to a known width for the sheet instead of letting the browser scale or cut whatever was on screen, and restores it after. On by default with a sensible width; chart: { print: { width: 800 } } to tune it, print: false to keep the old behaviour. Fixes #3352.
🐛 Fixes
A container resize arriving mid-animation was lost for good
The ResizeObserver fires once per resize, and the handler dropped that one callback whenever an animation was still running, so a chart in a collapsing sidebar simply kept its old size. The resize is now deferred and rechecked, and each container resize draws once rather than once per observer callback. Fixes #1584.
autoScaleYaxis scaling to points nobody can see
Zooming with autoScaleYaxis let one point just outside the window size the whole axis, and a series with nothing in the window at all still contributed. Stacked charts now also scale to the stacked totals inside the window rather than to individual series. Fixes #1260.
Bar width came from the smallest gap inside one series
A single series with one tight pair of x values shrank every bar on the chart. A bar's slot now comes from the axis, the union of gaps across all series. Fixes #4885.
Pie and radial charts stuck to the top of tall containers
The center came from min(width, height), so a tall, narrow container pinned the circle to the top with all the leftover space below it. The circle now centres in the height it actually has. Fixes #4875.
Date x values on a non-datetime axis
A Date object as x worked only when the axis was datetime; anywhere else it stringified into garbage, and an invalid Date slipped through unnoticed. Both handled in #5279, thanks @aron-intframe.
Tooltip index off past leading nulls
A series starting with nulls resolved the hovered index against its drawn points rather than the data, so the tooltip read the wrong point.
🔧 Internal
- CI now runs the test suite on every push to
main, not only on pull requests. The publish gate is no longer the first time a commit meets the runner.
Full Changelog: v7.0.0...v7.1.0