-
Notifications
You must be signed in to change notification settings - Fork 12k
Description
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