Skip to content
Dash TensorGrid

Data bars

A data bar draws a left-anchored horizontal bar behind each cell whose length is the value’s fraction of the column domain — an at-a-glance magnitude comparison down a column. It renders as a CSS linear-gradient background (no extra DOM), and like every cell visual it is presentation only: the engine ships raw numerics, the frontend just paints.

from dash_tensor_grid import TensorGrid, build_grid


payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum", "qty": "sum"},
    "formats": {"revenue": "currency:USD", "qty": "number:0"},
    "conditional_formats": {
        "qty": {"type": "dataBar", "color": "#4c8bf5"},
        # Diverging on zero: {"type": "dataBar", "color": "#2f9e44",
        #                     "negativeColor": "#e03131", "origin": 0}
    },
})
TensorGrid(id="grid", row_data=payload["row_data"], column_defs=payload["column_defs"])

Options

Section titled “Options”
  • color — the bar fill (any CSS color). For a diverging bar it is the above-origin (positive) side.
  • origin — the value the bar diverges from. With origin set, values above it paint rightward in color and values below paint leftward in negativeColor — the standard variance / profit-loss look (origin: 0). A value exactly at the origin draws no bar. Omit origin for a classic zero-based left-anchored bar.
  • negativeColor — the below-origin fill for a diverging bar (defaults to color).
  • domainMin / domainMax — fix the bar’s domain. domainMin defaults to 0 (a zero-based bar); domainMax defaults to the column’s maximum. For a diverging bar give the domain room on both sides (e.g. domainMin: -100, domainMax: 100, origin: 0).
  • For a background heatmap instead of a bar, see color scales; background precedence is an explicit style rule background, then the data bar, then the color scale.