What's New in ApexCharts 7.1: Four Chart Types That Do Their Own Arithmetic

ApexCharts 7.1.0 shipped on August 31 with four new chart types (streamgraph, waterfall, dumbbell and raincloud) and a print layout option. Nothing was removed, but two defaults can change how an existing chart prints or how its bars are sized, so check the table below.

Key takeaways

• New streamgraph, waterfall and dumbbell chart types, all in the default bundle.
• New raincloud chart type: Premium, and always an explicit import.
• chart.print is on by default, so a wide chart prints at 700px instead of losing its right-hand side.
• Bars on numeric or datetime axes size their slot from the axis, which may change existing charts.
• Fixes for container resize during animation, autoScaleYaxis, pie centring and tooltips past leading nulls.
• Upgrading is npm install apexcharts@7.1.0.

Which defaults changed?

Default change	Release	What you will see	How to reverse it
chart.print is on	7.1.0	A chart wider than 700px is laid out at 700px while printing, then restored	chart: { print: { enabled: false } }
Bar slot width comes from the axis	7.1.0	Different bar widths on a numeric or datetime axis when series do not share x values, when there is one data point, or when a stacked chart sets columnWidth in pixels	No option: the old widths overlapped or were wrong. Charts whose series share x values are unchanged

Printing. ApexCharts hooks beforeprint and afterprint, lays the chart out at print.width (CSS px, default 700, suits A4 and Letter portrait) and puts it back when the dialog closes. A chart already narrower is left alone. Laying out again keeps labels at their intended size, where scaling would shrink them. Widen it for landscape. Requested in #3352; see chart.print.

Bar slots. The slot used to come from the smallest gap within a single series, so series on different x values overlapped (#4885), a single point drew a bar across most of the grid, and a pixel columnWidth on a stacked numeric axis was read as a percentage. Sparse data still buckets by its own spacing.

Streamgraph

A streamgraph is a stacked area on a baseline chosen to keep the bands as level as possible, with each series name written on its band. You give it ordinary series; it solves the baseline. Try the Baseline control below.

new ApexCharts(el, {
  chart: { type: 'streamgraph' },
  series: [
    { name: 'Drama', data: [{ x: '2024-01-01', y: 32 }, { x: '2024-02-01', y: 35 }] },
    { name: 'Comedy', data: [{ x: '2024-01-01', y: 24 }, { x: '2024-02-01', y: 22 }] },
  ],
  xaxis: { type: 'datetime' },
}).render()

Columns are joined on x, so a series that skips a period contributes zero there. The tooltip reads out the whole hovered column plus its total. A negative value is floored at zero with a console warning. See the streamgraph guide.

Waterfall

The series holds the signed deltas; the chart accumulates them.

new ApexCharts(el, {
  chart: { type: 'waterfall' },
  series: [{
    name: 'Operating income',
    data: [
      { x: 'Net revenue', y: 8786000 },
      { x: 'Cost of sales', y: -2786000 },
      { x: 'Gross profit', isSubtotal: true },     // sum since the last cut
      { x: 'Operating expenses', y: -1786000 },
      { x: 'Operating income', isTotal: true },    // sum from zero
    ],
  }],
}).render()

A step bar carries y; an isSubtotal or isTotal bar carries no y and measures the running total for you. Every bar reports its own signed height. Rising bars are green, falling bars red (a datum's fillColor still wins), with dashed connectors and no legend. Requested in #847. See the waterfall guide.

Raincloud

A raincloud draws a distribution three ways at once: a half violin for the shape, a box for the summary, and the raw observations underneath. Give it the sample; it derives the density and the five-number summary.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/raincloud'   // never in the default bundle

new ApexCharts(el, {
  chart: { type: 'raincloud' },
  series: [{
    name: 'Weight gain',
    data: [
      { x: 'DD', points: [97, 101, 88, 94, 110, 92] },
      { x: 'DR', points: [84, 79, 91, 80, 76, 88] },
    ],
  }],
  plotOptions: { bar: { distributed: true } },
  legend: { show: false },
}).render()

Raincloud needs a Premium licence or above. Without one it renders in full with a trial watermark and is never blocked, so you can build against it before buying. The rest of the library is covered by Community, free under $2M in annual revenue, budget or funding. See pricing. Every layer is a plotOptions.violin option; the raincloud guide covers them.

Other fixes

• A container resize that arrives mid-animation is no longer dropped, and a CSS-transitioned container rebuilds once instead of once per frame (#1584).
• autoScaleYaxis ignores series with nothing in the zoom window, and stacked charts rescale to the window (#1260).
• Pie, donut, polarArea and radialBar centre vertically in containers taller than they are wide (#4875).
• A Date used as x on a numeric or category axis reads as its epoch instead of NaN, and one invalid date no longer stops the render.
• Tooltips land on the right point for series that start with nulls, which had pushed the crosshair off on zoomed charts.

The full list is in the 7.1.0 GitHub release.

Upgrading

npm install apexcharts@7.1.0

1. Check the two default changes against your bar charts and print handling.
2. For raincloud, add the apexcharts/features/raincloud import. The other three types need none.
3. Loading from a CDN, pin core and add-on URLs to the same exact version.

Framework wrappers need no new version: react-apexcharts, vue3-apexcharts, vue-apexcharts, stencil-apexcharts and ng-apexcharts@3.1.0 all accept 7.x. See Tree Shaking for every entry point.

Frequently asked questions