Skip to content
Dash TensorGrid

Color scales

A color scale paints each cell’s background by interpolating a color from the value’s position in the column’s numeric domain (min → max). It is pure presentation: the engine ships the raw numbers, the frontend only picks a color. The domain is faceted over the whole tree, and the synthetic grand-total row is excluded so its sum can’t flatten the scale.

from dash_tensor_grid import TensorGrid, build_grid


payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum"},
    "formats": {"revenue": "currency:USD"},
    "conditional_formats": {
        "revenue": {"type": "colorScale", "colors": ["#fff5f5", "#2f9e44"]},
        # Diverging (3 colors -> low / mid / high): "colors": ["#f8696b", "#ffeb84", "#63be7b"]
    },
})
TensorGrid(id="grid", row_data=payload["row_data"], column_defs=payload["column_defs"])

Options

Section titled “Options”
  • min / max — the CSS hex colors at the low and high ends of the domain (two-stop scale).
  • mid + domainMid — add a mid color to make a diverging three-stop scale, and set domainMid to the value the midpoint sits on (e.g. 0 for profit/loss, so red → white → green centers on zero). Without domainMid, the split is the domain midpoint (min + max) / 2.
  • domainMin / domainMax — fix the domain ends instead of the faceted min/max (useful to keep the scale stable as data changes, or to share one scale across columns).
  • A flat domain (every value equal) maps to the neutral stop rather than the extreme.
  • For a proportional bar instead of a background tint, see data bars; for a discrete value → style, see style rules. All three are collected on the conditional formatting overview.