Streamlit Net Bars

A reusable Streamlit component with diverging stacked bars and an overlaid net line. Click any bar segment to hide that entire series across all x positions. Toggle legend buttons to restore individual series, or select Show all. Use Undo to reverse visibility changes one at a time, including legend toggles and Show all. Undo is disabled until a change is made. History is kept per chart across Streamlit reruns for the current session.

Positive values stack above the centered zero line; negative values stack below. The line is the signed sum of the visible series at each position. All hidden means a zero line. Fixed axis is enabled by default: the symmetric y scale stays unchanged when hiding, restoring, or undoing series visibility. Turn it off to fit the visible contributions and both net lines. Axis mode survives Streamlit reruns independently of visibility history. Changing the input data or switching cumulative mode recalculates the scale. In cumulative mode, the fixed scale reserves room for any subset of the original series so hiding negative contributions cannot clip the filtered line.

Use Interaction to choose Zoom X axis, Zoom Y axis, or Zoom both axes, then drag a region of the plot to zoom into it. Reset zoom restores the full view; a double-click in a drag-zoom mode also resets it. Choose Click bars to resume hiding series directly, or use the legend while in zoom mode.

Zoom survives visibility changes, Undo, and Streamlit reruns. The fixed-axis setting controls the unzoomed scale; an explicit y zoom takes precedence. Changing cumulative or fixed-axis mode resets y zoom but preserves x zoom. Changing the input data resets the zoom. Cumulative totals always include the preceding periods, even when x zoom hides them. Copied PNGs use the current zoomed view, without the drag-selection overlay.

A dashed Original net line shows the signed sum of all input series, while the solid line shows the net of the currently visible series. The reference stays unchanged when hiding or restoring series and remains visible even when all bars are hidden. With every series visible, the two lines overlap. Both use running totals in cumulative mode, and the axis includes both lines. The reference is recalculated when the input data changes. Copy image and Download PNG include both lines and their legend keys.

Toggle Cumulative net to show the running signed sum of the visible net values, starting at the first x position. For net values [40, 50, -20], the cumulative line is [40, 90, 70]. Positions use the supplied order, so sort time data before passing it in. Bars keep their per-position contributions, and the shared axis expands to fit the line. Toggle off to return to per-position net. Mode survives reruns; hiding, restoring, and Undo work in either mode. Undo continues to reverse visibility changes, independently of the selected mode.

Copy image copies a PNG of the current chart, title, visible-series legend, and net mode at double resolution. It includes the full plot even when the chart scrolls horizontally. Paste into an app that accepts images. Copying requires a browser that supports image clipboard writes and a secure context (HTTPS or localhost). A Download PNG link is offered after copying, and also as a fallback if clipboard access is unavailable or denied. Copying does not change visibility, mode, or Undo history.

Run the demo

python -m venv .venv
.venv\Scripts\python -m pip install -e .
.venv\Scripts\python -m streamlit run app.py

Once published on PyPI, install with python -m pip install interactive-streamlit-bar-plot.

Use the component

import streamlit as st
from streamlit_net_bars import net_bar_chart

result = net_bar_chart(
    x=["Jan", "Feb", "Mar"],
    series={"Revenue": [100, 120, 140], "Costs": [-60, -70, -80]},
    key="cashflow",  # unique, stable key per chart
    title="Monthly cashflow",
    height=420,  # plot height in pixels; header and legend add height
)
st.write(result.net)      # [40, 50, 60] with all series visible
st.write(result.hidden)   # names of hidden series
st.write(result.visible)  # names of visible series
st.write(result.cumulative)  # whether cumulative mode is selected
st.write(result.line_values)  # displayed line, including cumulative mode

Pass a mapping of names to equally sized numeric sequences. DataFrame columns work with series={name: df[name].tolist() for name in columns}. Values must be finite; fill or drop missing values before calling. Labels are displayed in the provided order; duplicate labels remain distinct positions. Series names are their identities, so use stable names when updating data. Visibility survives Streamlit reruns; new series start visible and removed series are ignored.

Use on_change=callback for a Streamlit callback when visibility or line mode changes. The returned net values are recalculated in Python from the current visibility and input data. Multiple chart instances are independent when given different keys.

Development

The frontend is plain JavaScript and SVG, with no Node build or CDN dependency. Assets ship inside the Python package. The component uses Streamlit Components v2 (Streamlit 1.51 or newer). Bars support Enter/Space and provide native hover tooltips. The legend also supports hiding zero-only series. Long charts scroll horizontally; long x labels are abbreviated in the plot and shown fully in tooltips.

python -m unittest discover -s tests -v
node --test tests/test_axis.mjs
Get-Content streamlit_net_bars/frontend/chart.js -Raw | node --input-type=module --check

The demo uses illustrative monthly contributions, not real financial data.

Releases

See PUBLISHING.md for the GitHub Actions Trusted Publishing setup and release procedure. Licensed under MIT; copyright John Della Rosa.