streamgraph

chart.type: 'streamgraph'. A stacked area whose baseline is a computed curve rather than the zero line, so the thick bands stay level. The series are ordinary scalar series and ApexCharts does the stacking.

A streamgraph draws through the range area pathway. It is in the default apexcharts bundle; on a lean core, import from apexcharts/streamgraph, or add import 'apexcharts/features/streamgraph' alongside apexcharts/rangeArea.

See the streamgraph guide for the full walkthrough.

Where the baseline goes. This is the option that decides what the chart claims.

Available Options:

• wiggle (default): minimizes the total weighted slope of the bands, so the thick ones stay level. This is the classic streamgraph (Byron and Wattenberg, 2008).
• silhouette: centres the stack on one horizontal line.
• zero: an ordinary stacked area, on the zero line.
• expand: normalizes each column to its own total, so the chart reads as composition rather than volume. Every column is the full plot height, and the tooltip drops its total row.

plotOptions: {
  streamgraph: {
    offset: 'expand'
  }
}

Because the form has no zero line worth reading against, ApexCharts sets yaxis.show: false for a streamgraph unless you set it yourself. An axis of stacking offsets would be misleading.

The order the bands stack in, bottom first.

Available Options:

• inside-out (default): the series that peak earliest sit in the middle, and later peaks fan outward to whichever side is currently thinner. The middle of the stack moves least under a wiggle baseline, so this is the ordering that keeps a streamgraph readable.
• inverse: the series order, reversed.
• none: the series order exactly as given.

plotOptions: {
  streamgraph: {
    offset: 'wiggle',
    order: 'inside-out'
  }
}

Hovering a band fades the others.

It fades the others rather than marking the hovered band because the bands touch edge to edge and leave no room to mark anything: a drop shadow falls onto both neighbours, and an edge stroke is centred on a boundary the band shares. Fading needs no room, and it leaves the hovered band's colour exactly as it was.

A faded band's name is recoloured to chart.foreColor rather than faded with it. The name takes black or white by the contrast of the band at full strength, so fading the band alone would leave white text on a band that has gone pale.

Whether hovering a band fades the others. This is the surface's only acknowledgement that it can be used, so turning it off leaves a streamgraph that does not respond to the cursor except through the tooltip.

What the other bands drop to. Much above 0.5 and the hovered band stops reading as picked out.

plotOptions: {
  streamgraph: {
    hover: {
      opacity: 0.2
    }
  }
}

The series name written on the band itself, where that band is thickest.

On by default. A drifting band is far easier to find by its own name than by matching a colour to a legend key, and naming the bands in place leaves the legend free to be the thing you click rather than the only place the names appear.

Whether to draw the series names on the bands. Set false to rely on the legend and tooltip alone.

A band narrower than this many pixels is left unlabelled, rather than given a name truncated past the point of being a name.

plotOptions: {
  streamgraph: {
    labels: {
      minWidth: 40
    }
  }
}

Lower bound, in px, for labels.style.fontSize: 'auto'. Ignored when a literal font size is given.

Upper bound, in px, for labels.style.fontSize: 'auto'. Ignored when a literal font size is given.

Typography for the in-band names.

'auto' (default) sizes each name to the band it sits on, bounded by labels.minFontSize and labels.maxFontSize.

That is the convention of the form, and it is what makes a streamgraph read at a glance. The chart's whole claim is that thickness is quantity, and one fixed size states that claim in the same voice for a band carrying half the total and a band carrying a rounding error.

Give a literal size to draw every name the same:

plotOptions: {
  streamgraph: {
    labels: {
      style: {
        fontSize: '12px'
      }
    }
  }
}

Font family for the in-band names. Falls back to chart.fontFamily.

Font weight for the in-band names.

Per-series override, indexed like colors. By default each label takes black or white, whichever reads on its own band.

plotOptions: {
  streamgraph: {
    labels: {
      style: {
        colors: ['#fff', '#000', '#fff']
      }
    }
  }
}