Buma UI - DocumentationBuma UI - Documentation
Get Started
Foundations
Components
Resources
Patterns
Data Visualization
Back to BSpace
Get Started
Foundations
Components
Resources
Patterns
Data Visualization
  • stacksFoundations
    • 💡 Overview
    • Color
    • Principle
    • Typography
  • brickComponents
    • 💡 Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Bottom Sheet
    • Bread Crumb
    • Button
    • Button Link
    • Button Navigation
    • Calendar
    • Card
    • Chat
    • Checkbox
    • Chips
    • Choice Tile
    • Comment
    • Date Picker
    • Divider
    • Download
    • Drawer
    • Dropdown
    • Empty State
    • Floating Button
    • Form Input
    • Header
    • Hint
    • Icon
    • List Choice
    • Loading
    • Modal
    • Navigation Bar
    • Notification
    • Pagination
    • Progress Bar
    • Radio Button
    • Search
    • Scrolling Bar
    • Segmented Switch
    • Side Menu
    • Side Tab
    • Slider
    • Switch
    • Tab
    • Table
    • Text Area
    • Text Input
    • Time Picker
    • Title
    • Toast
    • Tooltip
    • Wizzard
  • splitscreenPattern
    • 💡 Overview
    • Filter
      upcoming
    • Form
      upcoming
    • Notification
    • PWA
      upcoming
    • table
      upcoming
    • Upload Download
      upcoming
  • insert_chartData Visualization
    • 💡 Overview
    • Tiering
    • Pattern
    • Chart and Graph
      • Chart Selection Guide
      • Map Selector
      • Donut Chart
      • Donut Progress Bar Chart
      • Spider Chart
      • Line Chart
      • Chart Area
      • Speedometer
      • Heat Map
      • Scatter Plot
      • Pie Chart
      • Bar Chart
      • Waterfall Chart
      • Sunburst Chart
      • Tree Decomposition Chart
      • Scorecards
      • Table
      • Micro Visualization
    • Typography
    • Color Palette
  • data_objectTokens
    upcoming
  • inventory_2Resources
    • 💡 Overview
    • Mobile
      new
      • 💡 Introduction
      • Installation
      • General
        • Important Rules
        • Naming Convention
        • Clean Architecture
    • Web
      upcoming

Watterfall Chart

Anatomy

 A visual elements that serve as a guide to explain the meaning of various data or elements displayed in a graph
 The label on the vertical (up-down) side of the chart, showing what the numbers represent.
 Labels in a waterfall chart provide descriptive information to identify or explain each step in the sequence.
 The chart in a waterfall visualization is the graphical representation of the data, comprising vertical bars and connecting lines.
 Faint lines across the chart that help you match data points to the values on the axes.
 A bar that lets you move around the chart when there’s too much data to fit on the screen.
Guidelines for Waterfall Chart

    • Start and End Point: Mark the start and end values ​​with different colors.
    • Change Step: Use different colors for positive and negative changes to clearly differentiate between increases and decreases.
    • Cumulative Totals: Display cumulative totals at each step to show each segment's contribution to the final value.
    • Vertical: Suitable for displaying up to 15-20 data points to keep it clear.
    • Horizontal: Can be used for the same range, but make sure the labels are clear and don't overlap.
    • Positive Change: Usually uses green or another color that indicates positive change.
    • Negative Change: Usually use red or other colors that indicate negative changes.
    • Neutral/Total: Use neutral colors such as gray for the start, end, and total bars.
    • Label: Use a short label to identify each bar. Place labels inside or outside the bar depending on space and readability.
    • Tooltip: Provide detailed information when the cursor is over to display precise values ​​and percentages.
Example of Source Data

When to Use Waterfall Chart?
  • Track cumulative changes in value over time or across categories.
  • Ideal for visualizing the impact of positive value and consecutive negative.
  • Indicates the contribution of individual elements to the total.
arrow_back
Previous Bar Chart
Next Sunburst Chart
arrow_forward