Skip to content

Waterfall chart support using stacked bars #12152

@Sumit210106

Description

@Sumit210106

Feature Proposal

Hey folks,

I was playing around with Chart.js and ended up putting together a simple Waterfall chart using stacked bars. It actually works pretty cleanly without touching any core internals, so I figured I’d share it here in case it’s something worth considering for the library.

A quick demo of what I have so far:
https://codepen.io/Sumit210106/pen/qEZqMQL

The idea is pretty straightforward:

  • a transparent “base” dataset to position each step
  • a “change” dataset that handles the positive/negative bars
  • optional final “total” bar
  • no custom controllers or anything complex

It’s basically the Waterfall pattern that people build manually, just packaged in a consistent way.

I’m thinking this could either live as a small plugin or as a chart type extending the Bar controller. Not fully sure which direction makes more sense in the Chart.js ecosystem, so I wanted to open the conversation before I take it further.

If this feels useful, I can clean it up into a proper contribution (docs, tests, etc.).
If not, no worries — figured I’d at least share the experiment.

Thanks!

Possible Implementation


POSSIBLE IMPLEMENTATION

A minimal version can be implemented entirely on top of the existing bar controller:

- Use two datasets on the same stack:
  - “base” → transparent bars representing cumulative starting points
  - “change” → actual positive/negative steps

- A `summary: true` flag can auto-compute a final total bar.

- No changes to controllers, scales, or elements are required. 
  Everything works with normal stacked bar behavior.

If this moves forward, it could be:
1. a lightweight plugin, or
2. a small chart-type wrapper extending BarController.

I can help with:
- implementation
- docs/examples
- TypeScript types
- tests

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions