feat: Improves waterfall chart

[anantaoutlook]

SUMMARY

This PR includes the following improvements:

1.) Horizontal waterfall in addition to vertical.

2.) Axis label fixes to word-wrap longer labels instead of hiding them. This is extremely important for readability/usability.
For example. Prior to these fixes, roughly half of the following labels in this chart were hidden:

3.) Sorting of Waterfall: It is now possible to sort the waterfall by a field other than the field indicated in the waterfall column headers. Again, extremely important. As an example, in the following chart, we are bridging from gross revenue to Profit. It's vital that these grouping appear in the correct order:

4.) Added option to use first value as subtotal, and bold first value as subtotal. These are important optional settings for the waterfall. In the example, these allow the Gross Revenue bar to be presented as a subtotal (full bar and grey), and the label for Gross Revenue is bold.
Before:

After:

5.) Cross-filtering is now feasible for the waterfall chart.

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Deeply nested complex function ▹ view	✅ Fix detected
	Scattered series transformation logic ▹ view	✅ Fix detected
	Suspicious file suffix in types import ▹ view	✅ Fix detected
	Inaccurate Text Wrapping Calculation ▹ view	✅ Fix detected
	Order Direction Control Not Dependent on Column Selection ▹ view	✅ Fix detected
	Remove or implement commented validators ▹ view	✅ Fix detected
	Type inconsistency in default value ▹ view	✅ Fix detected
	Inadequate Error Handling for Invalid Label Distance ▹ view	✅ Fix detected
	Inconsistent Mixed-Type Data Sorting ▹ view	✅ Fix detected
	Missing documentation for complex click handler ▹ view

Files scanned

​

File Path	Reviewed
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

[rusackas]

Can you add some details to the Description so we know the intent of the change? Thanks!

[anantaoutlook]

Can you add some details to the Description so we know the intent of the change? Thanks!

Details are attached. Please let me know if you need more info.
waterfall-changes doc.pdf

[rea725]

The work performed on Superset by @anantaoutlook in this PR includes the following improvements:

1.) Horizontal waterfall in addition to vertical.

2.) Axis label fixes to word-wrap longer labels instead of hiding them. This is extremely important for readability/usability.
For example. Prior to these fixes, roughly half of the following labels in this chart were hidden:

3.) Sorting of Waterfall: It is now possible to sort the waterfall by a field other than the field indicated in the waterfall column headers. Again, extremely important. As an example, in the following chart, we are bridging from gross revenue to Profit. It's vital that these grouping appear in the correct order:

4.) Added option to use first value as subtotal, and bold first value as subtotal. These are important optional settings for the waterfall. In the example, these allow the Gross Revenue bar to be presented as a subtotal (full bar and grey), and the label for Gross Revenue is bold.
Before:

After:

5.) Cross-filtering is now feasible for the waterfall chart.

[michael-s-molina]

Thanks @anantaoutlook @rea725 for the great improvements! I updated the PR description with @rea725's comment.

2.) Axis label fixes to word-wrap longer labels instead of hiding them.

ECharts automatically calculates what labels will be displayed to avoid label overlaps when the number of bars is high. I think the solution here would be to provide a checkbox to show all labels (disabled by default). The same feature is currently being discussed in #33191 so please check the comments of that PR.

4.) Added option to use first value as subtotal, and bold first value as subtotal.

Can we assume that if the first value is used as a subtotal, it's always displayed with bold? It's good to avoid additional controls if possible.

[michael-s-molina]

@anantaoutlook Could you also fill the Testing Instructions part of the PR description?

[michael-s-molina]

First-pass comments. Great work!

[michael-s-molina]

@anantaoutlook Could you make sure all labels of all controls and select values follow the sentence case which capitalizes only the first letter of the first word in a sentence?

[michael-s-molina]

Thanks for the changes @anantaoutlook. Second-pass review below.

[michael-s-molina]

I noticed that you're adding the Order series by column to the GROUP BY clause which will produce incorrect results. Take this chart as an example where we have year broke down by product_line.

If we set Order series by column to status the chart will be further broke down splitting Classic Cars into multiple values.

This control should not affect the original breakdown. If your intention is to allow more than one breakdown, we would need to change the Breakdown control to support multiple values.

[anantaoutlook]

This one I need some time to figure out (edited)

[michael-s-molina]

Got it. Let me know when this is fixed and I can review again.

[rea725]

@michael-s-molina This is a feature, albeit one that merits caution and an explanation. The reason for this is that we need to have the ability to prescribe the order based on a sort order that is different than an alphanumeric sort that is affected by the dimension used in the x-axis.

For example. I have a waterfall below that bridges from Gross Revenue to Enterprise Profit.

It's important that the order is as follows:
Gross Revenue
Net Revenue
Gross Profit
Pre-Hurdle Profit
Enterprise Profit

We create this sort by sorting on Tier Sort v2, an engineered field that is designed to produce the result we need.

If we don't do this, we get the original behavior of the waterfall chart, which is to order the groupings as follows:

Enterprise Profit
Gross Profit
Net Revenue
Pre-Hurdle Profit

This creates an unacceptable result for this particular use case, and without the ability to mandate sort order by a different column, we are forced to rename our grouping entities with numeric prefixes or something (highly undesirable) in order to get something approximating correct behavior.

Perhaps we need a helper tip in the configure screen to provide instructions / context for the sort feature?

[michael-s-molina]

Your use case is valid @rea725, thanks for sharing. We have a similar feature in the Bar chart where users can sort the x-axis by a specific column. This is different than affecting the GROUP BY clause which is used in the Waterfall for the breakdowns. In the example below, you can think of Dimensions as the breakdowns, and users have the ability to sort the x-axis (product_line) by year. Notice how the GROUP BY is not affected.

Screen.Recording.2025-05-29.at.13.05.32.mov

I think we need to change this PR to match the X-Axis Sort By control of the Bar chart.

[anantaoutlook]

@justinpark @kgabryje @michael-s-molina , please review this.

[michael-s-molina]

@justinpark @kgabryje @michael-s-molina , please review this.

@anantaoutlook Was this comment resolved?