waterfall

chart.type: 'waterfall'. The series holds signed deltas and ApexCharts accumulates the running total, drawing each step as a column floating between the level it started at and the level it left behind. A datum flagged isSubtotal or isTotal draws the running total instead and carries no y of its own.

A waterfall draws through the vertical range column pathway. It is in the default apexcharts bundle; on a lean core, import from apexcharts/waterfall, or add import 'apexcharts/features/waterfall' alongside apexcharts/bar.

Orientation is plotOptions.bar.horizontal, and the bar thickness is plotOptions.bar.columnWidth / barHeight, which the waterfall preset narrows to '60%' so the connectors have room in the gaps.

See the waterfall guide for the full walkthrough.

Semantic fills for the three kinds of bar. A datum's own fillColor always wins over these.

plotOptions: {
  waterfall: {
    colors: {
      positive: '#00A86F',
      negative: '#FF4560',
      subtotal: '#008FFB',
      total: '#008FFB'
    }
  }
}

Fill for a step that raises the running total.

Up is good, down is bad: this is the one convention a waterfall is read by, which is why it is a default rather than something you have to configure.

Fill for a step that lowers the running total.

Fill for an isSubtotal bar.

Defaults to the series colour from the active palette, so the running totals stay distinct from the steps and still follow the theme. Name a colour to override.

Fill for an isTotal bar. Same default as colors.subtotal.

The segments joining each bar's finish to the next one's start. Without them the floating columns read as unrelated bars rather than one walk, so they are on by default.

Whether to draw the connectors.

plotOptions: {
  waterfall: {
    connectors: {
      show: false
    }
  }
}

Connector stroke colour. Falls back to grid.borderColor, which keeps it theme-aware.

Connector stroke width, in px.

Connector dash length. 0 draws a solid line.

plotOptions: {
  waterfall: {
    connectors: {
      strokeDashArray: 0,
      strokeWidth: 2
    }
  }
}