Color

When fill or stroke maps to a data field, szum creates a color scale automatically and shows a legend.

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 fill or stroke starts with #, it's a direct color – no scale, no legend:

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

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.