Skip to content

Feature/waterfall chart sample#12253

Open
BrunoDuvane40 wants to merge 2 commits into
chartjs:masterfrom
BrunoDuvane40:feature/waterfall-chart-sample
Open

Feature/waterfall chart sample#12253
BrunoDuvane40 wants to merge 2 commits into
chartjs:masterfrom
BrunoDuvane40:feature/waterfall-chart-sample

Conversation

@BrunoDuvane40
Copy link
Copy Markdown

Summary

This PR addresses issue #12152 by adding Waterfall chart examples to the Chart.js documentation samples.

The contribution focuses on documentation/sample enhancement and demonstrates two different ways to create Waterfall charts using existing Chart.js bar chart functionality.

Interactive demo:
https://codepen.io/BrunoDuvane40/pen/pvNEPPB

Changes Made

  • Added docs/samples/bar/waterfall.md
  • Added docs/samples/bar/waterfall-stacked.md
  • Updated docs/.vuepress/config.ts to register the new samples under the “Bar Charts” section
  • Verified both samples render correctly in the local documentation website

Implementation Notes

Two alternative approaches were implemented and documented:

  • Floating bar approach, using [start, end] values to directly represent cumulative transitions
  • Stacked bar approach, using a transparent base dataset combined with a visible change dataset

Alternative approaches considered:

  • Floating bars using cumulative [start, end] ranges
  • Stacked bars using transparent positioning datasets (recommended by the issue creator)

The floating bar implementation was considered the cleaner and more semantically direct solution because each Waterfall step explicitly represents its visual start and end values without requiring auxiliary transparent datasets.

The stacked bar approach was also included because it aligns closely with the implementation idea discussed in the original issue.

Testing / Verification

  • Ran pnpm run build
  • Ran NODE_OPTIONS=--openssl-legacy-provider pnpm run docs:dev
  • Verified both Waterfall chart sample pages render correctly locally
  • Confirmed no browser console/runtime errors
  • Created an interactive CodePen demonstration for both implementations

Related Issue

Closes #12152

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Waterfall chart support using stacked bars

2 participants