Color Scales & Palettes

Some features on this page require a paid plan. See Plans & Limits.

When a supported paint channel maps to a data field, Szum creates a color scale automatically and shows a legend. Use fill for areas, pies, and text; stroke for rules; either one (not both) for lines; and either or both for dots and bars.

Categorical

String values produce distinct colors from the theme palette:

Sequential

Numeric values produce a gradient from the theme's sequentialRange:

Custom domain and range

Override the inferred colors. For categorical scales, control which values get which colors:

For sequential scales, set the gradient endpoints:

{
  "color": {
    "type": "sequential",
    "range": ["#fee0d2", "#de2d26"]
  }
}

Legend label

Set color.label to title the legend:

{ "color": { "label": "Source" } }

Literal colors

When a supported fill or stroke is a #RGB or #RRGGBB literal, it's a direct color – no scale, no legend. Every non-# value is a field reference:

{ "type": "ruleY", "stroke": "#b84233" }

Automatic behaviors

Color cycling: If you have more data series than colors in the palette, colors wrap around. A 10-color palette handles up to 10 series; the 11th reuses the 1st color.

Legend positioning: The legend appears automatically in the header area (above the plot) when a color scale exists. Categorical legends show swatches; sequential legends show a gradient bar.

Color