Colour and in-cell visuals

Colour scales

Add a colour scale when a reader should judge a column's magnitude at a glance, like utilization or growth, without scanning every number in the column.

Region	Seasonality	YoY change	Note
EMEA	1	-2	Strong renewal
APAC	2	-1	Stable
AMER	3	0	—
LATAM	4	+1	New logo added
EMEA	5	+2	Expanded contract

lowhigh

What you can do

colorScale is set per column (or PivotValue) and colors each cell by its value; its 5 properties are method, domain, palette, bins, and nullColor.
method is numeric, bin, or quantile: a continuous ramp, fixed-width buckets, or equal-count buckets.
palette is either a named ramp, one of viridis, magma, blues, rdbu, brbg, spectral, okabe-ito, or set2, or an explicit array of 2 or more colors; the two are mutually exclusive on one column.
domain defaults to auto, deriving the scale’s range from the data; set it explicitly as [min, max] or [min, mid, max] to fix it instead.
bins (default 5, minimum 2) sets how many buckets bin and quantile divide the domain into.
nullColor colors a cell whose value is null, separately from the rest of the scale.

Set on a TableColumn or a PivotValue on a table panel; chart:* panels have their own series-level color tokens instead of colorScale.

Spec

View spec

{
  "id": "team-health-table",
  "type": "table",
  "title": "Team health",
  "data": {
    "rows": [
      {
        "team": "Platform",
        "growth": -8,
        "utilization": 72,
        "uptime": 99.95
      },
      {
        "team": "Data",
        "growth": 14,
        "utilization": 58,
        "uptime": 99.8
      },
      {
        "team": "Growth",
        "growth": 22,
        "utilization": 91,
        "uptime": null
      },
      {
        "team": "Support",
        "growth": 3,
        "utilization": 34,
        "uptime": 99.6
      }
    ]
  },
  "spec": {
    "columns": [
      {
        "field": "team",
        "label": "Team"
      },
      {
        "field": "growth",
        "label": "Growth",
        "format": {
          "type": "percentage"
        },
        "align": "right",
        "colorScale": {
          "domain": [
            -20,
            0,
            20
          ],
          "palette": "rdbu"
        }
      },
      {
        "field": "utilization",
        "label": "Utilization",
        "format": {
          "type": "percentage"
        },
        "align": "right",
        "colorScale": {
          "method": "quantile",
          "palette": "viridis",
          "bins": 4
        }
      },
      {
        "field": "uptime",
        "label": "Uptime",
        "format": {
          "type": "percentage",
          "decimals": 2
        },
        "align": "right",
        "colorScale": {
          "palette": [
            "#c6f6d5",
            "#38a169",
            "#1a4731"
          ],
          "nullColor": "#e2e8f0"
        }
      }
    ]
  }
}

growth uses the named rdbu diverging palette over an explicit [-20, 0, 20] domain; utilization uses quantile binning into 4 buckets; uptime uses an explicit 3-color array and colors its null cell with nullColor instead of leaving it blank.

Try it live

Open the rich-tables template in the Builder

Open the rich-tables template, page p1-presentation, panel p1-reps for a colorScale column next to panel- and column-level conditionalFormat; page p4-pivot, panel p4-region-quarter shows colorScale on pivot values.

Build it in dvt

Every table capability on this site is a few lines of the same declarative JSON spec. Read the full spec format, or connect an AI agent to your warehouse and build one live in the quickstart.

Follow the build

dvt is in founding research. Leave your email and we'll reach out when there's something to see — no newsletters, no noise.