Shimoku docs
  • 🚀QuickStart
    • Installation & Setup
    • Minimal APP example
    • Extended Example
    • Templates & tutorials
  • 🤖Artificial Intelligence
    • Classification
      • Train Classification
        • Train Classification Outputs
      • Predict Classification
        • Predict Classification Outputs
    • Generate Insights
      • Generate Insights Outputs
  • 🛠️Building Web App
    • Environment
      • Overview
      • Environment Variables
    • Management
      • Managing Universes
      • Managing Workspaces
      • Managing Boards
    • Menu
      • Changing the Menu Path
      • Updating the Menu Path
      • Deleting the Menu Path
    • Grid
      • Using the Grid
    • Theming
      • Colors Usage
    • Actions
    • Modals
    • IO
  • 💡Elements
    • Summary
    • Charts
      • Table
        • Buttons Column
        • Filters
        • Search bars
        • Colored labels
      • HTML
        • Raw HTML
        • Beautiful Titles
        • Background Indicators
        • Click to New Tab
        • Box With Button
        • Panel
      • Indicators
        • Indicator
        • Grouped Indicators
        • Vertical Indicators
        • Color by Value
        • Gauge Indicator
        • Indicators with Header
      • Scatter Charts
        • Scatter
        • Scatter with Effect
      • Line Charts
        • Line
        • Predictive Line
        • Segmented Line
        • Marked Line
        • Line With Confidence Area
        • Top Bottom Line Charts
        • Summary Line
      • Area Charts
        • Area
        • Stacked Area
        • Segmented Area
        • Top Bottom Area Charts
      • Bar Charts
        • Bar
        • Stacked Bar
        • Horizontal Bar
        • Stacked Horizontal Bar
        • Zero Centered Bar
      • Pie Charts
        • Pie
        • Doughnut
        • Rose
      • Gauge Charts
        • Shimoku Gauge
        • Speed Gauge
      • Input forms
        • Group chained Inputs
        • List input search
        • Conditional inputs
        • Audio input
        • Drag & Drop
      • Line and Bar
      • Waterfall
      • Annotated Chart
      • Heatmap
      • Radar
      • Sunburst
      • Tree
      • Treemap
      • Sankey Diagram
      • Funnel chart
      • iFrame
    • Composite Template Charts
      • Infographics text bubble
      • Chart and Modal Button
      • Chart and Indicators
    • Data Sets
      • Data Set Filters
    • Create your own charts
      • Free Echarts
      • Bento box
    • Features & Navigation
      • Tabs
      • History navigation & Breadcrumb
  • 🔍Advanced usage
    • CLI
    • Workflow Triggers
    • Code Generation
  • 🌍Cloud & Community
    • Shimoku Cloud
    • Shared links
    • Handling Workspaces & Users
      • User authentication
      • Inviting users
      • Creating users
      • Users with multi-workspace access
  • 🌐Releases
    • 2024
      • v.2.6
      • v.2.5
      • v.2.4
      • v.2.3
        • v.2.3.1
      • v.2.2
        • v.2.2.3
        • v.2.2.2
        • v.2.2.1
      • v.2.1
        • v.2.1.2
        • v.2.1.1
      • v.2.0
        • v.2.0.(1..4)
      • v.1.6
        • v.1.6.1
      • v.1.5
    • 2023
      • v.1.4
        • v.1.4.1
        • v.1.4.2
      • v.1.3
      • v.1.2
        • v.1.2.1
      • v.1.1
        • v.1.1.1
      • v.1.0
        • v.1.0.2
        • v.1.0.1
      • v.0.20
      • v.0.19
      • v.0.18
      • v.0.17
        • v.0.17.1
      • v.0.16
        • v.0.16.3
        • v.0.16.2
        • v.0.16.1
      • v.0.15
      • v.0.14
    • 2022
      • v.0.13
        • v.0.13.3
      • v.0.12
      • v.0.11
      • v.0.10
        • v.0.10.4
        • v.0.10.3
        • v.0.10.1
      • v.0.9
      • v.0.8
      • v.0.7
        • v.0.7.1
      • v.0.6
      • v.0.5
      • v.0.4
      • v.0.3
        • v0.3.2
        • v0.3.1
      • v.0.2
Powered by GitBook
On this page
  • The Method To Use
  • Examples
  • Variants

Was this helpful?

  1. Elements
  2. Charts

Waterfall

The Waterfall chart provides a visual representation of sequential data points, demonstrating the cumulative effect of sequentially occurring positive and negative values. It effectively showcases the step-by-step journey of a value, helping to highlight the major contributions or subtractions along the way. The visualization aids in understanding and analyzing the sequence of events or factors leading to a particular end value.

The Method To Use

The method is s.plt.line_and_bar_charts()

It must contain the following input variables:

data: Union[str, DataFrame, List[Dict]]
order: int
x: str
positive: str
negative: str

And accepts the following input variables as optional:

rows_size: Optional[int] = None
cols_size: Optional[int] = None
padding: Optional[str] = None
title: Optional[str] = None
x_axis_name: Optional[str] = None
y_axis_name: Optional[str] = None
show_balance: bool = False
option_modifications: Optional[Dict] = None,
variant: Optional[str] = None

To generate a Waterfall Chart, your input should be structured as a list of dictionaries. Each dictionary represents a specific date and its corresponding income and expenses.

Here's the format:

data = [
    {'x': '<Date>', 'income': <Income Value>, 'expenses': <Expense Value>},
    ...
]

Key Components:

  1. 'x': Represents the date or any sequential point you want to plot. It should be in string format.

  2. 'income': Represents the income for the corresponding date. It should be a positive numeric value. If there's no income for a specific date, input 0.

  3. 'expenses': Represents the expenses for the corresponding date. It should be a positive numeric value, even though it's an expense. If there are no expenses for a specific date, input 0.


Once the input is structured in this format, it can be used to generate a Waterfall Chart that visually captures the sequential changes in profit or loss.

Examples

Both examples use this dataset:

data = [
    {'x': 'Nov 1', 'income': 900, 'expenses': 0},
    {'x': 'Nov 2', 'income': 345, 'expenses': 0},
    {'x': 'Nov 3', 'income': 393, 'expenses': 0},
    {'x': 'Nov 4', 'income': 0, 'expenses': 108},
    {'x': 'Nov 5', 'income': 0, 'expenses': 154},
    {'x': 'Nov 6', 'income': 135, 'expenses': 0},
    {'x': 'Nov 7', 'income': 178, 'expenses': 0},
    {'x': 'Nov 8', 'income': 286, 'expenses': 0},
    {'x': 'Nov 9', 'income': 0, 'expenses': 119},
    {'x': 'Nov 10', 'income': 0, 'expenses': 361},
    {'x': 'Nov 11', 'income': 0, 'expenses': 203},
    {'x': 'Nov 12', 'income': 450, 'expenses': 156},
    {'x': 'Nov 13', 'income': 45, 'expenses': 189},
    {'x': 'Nov 14', 'income': 0, 'expenses': 0},
    {'x': 'Nov 15', 'income': 122, 'expenses': 87},
    {'x': 'Nov 16', 'income': 65, 'expenses': 156},
    {'x': 'Nov 17', 'income': 336, 'expenses': 450},
    {'x': 'Nov 18', 'income': 560, 'expenses': 400},
    {'x': 'Nov 19', 'income': 1200, 'expenses': 1130},
    {'x': 'Nov 20', 'income': 3200, 'expenses': 3130},
]

The first example uses the basic configuration:

s.plt.waterfall(
    data=data, order=0, x='x',
    positive='income',
    negative='expenses',
)

The second example uses the balance:

s.plt.waterfall(
    data=data, order=0, x='x',
    title='Waterfall with balance',
    positive='income',
    negative='expenses',
    show_balance=True
)

Variants

By setting the parameter variant to the following values the appearance of the chart can be changed:

PreviousLine and BarNextAnnotated Chart

Last updated 1 year ago

Was this helpful?

💡
variant="clean"
variant="minimal"