---
id: "packages/active-charts/all-exports/quantitative-color-scale"
title: "Quantitative color scale"
description: "ClassesColorScale, ColorClass, ColorLegendOptions, ColorMeasureOptions and 4 more: generated from the source of active-charts."
url: "/packages/active-charts/all-exports/quantitative-color-scale"
locale: "en"
revision: "g0mvjxwj5c-88bdbe1c:quantitative-color-scale"
---

# Quantitative color scale

Exported by `@workspace/active-charts`. Generated from the package source; part of [the index of every export](/packages/active-charts/all-exports).

## Types

**ClassesColorScale**

```ts
interface ClassesColorScale {
  type: 'classes';
  classes: readonly ColorClass[];
}
```

A scale of named classes: every value takes the colour of the one class
it lies in, and the class legend names them. Boundaries are
deterministic: `from` belongs to its class, `to` to the next. Classes are
read in the order given (low to high); one that overlaps an earlier class
is reported, and a value in the overlap belongs to the earlier class. A
value that lies in no class (a gap between classes, or beyond a bounded
end) is not missing: it is drawn in a neutral paint, named "outside the
classes" wherever its class would be named, the legend adds that entry,
and it is reported. A missing value belongs to no class.

**ColorClass**

```ts
interface ColorClass {
  from?: number;
  to?: number;
  name: string;
  color: string;
}
```

One named class of values: the values from `from` (inclusive) up to `to`
(exclusive). An absent `from` reaches every lower value, an absent `to`
every higher one.

**ColorLegendOptions**

```ts
interface ColorLegendOptions {
  enabled?: boolean;
  position?: 'bottom' | 'right';
}
```

Where a chart's colour key (its gradient or class legend) sits.

**ColorMeasureOptions**

```ts
interface ColorMeasureOptions {
  label: string;
  scale?: QuantitativeColorScale;
  valueSemantics?: ChartValueSemantics;
  legend?: boolean | ColorLegendOptions;
}
```

Colour by a measure on a hierarchy (`TreemapChart`, `SunburstChart`; T5,
ADR-098): each node's `colorValue` becomes the fill of its data mark
through one scale, while `value` keeps sizing it. Opt-in: without it the
chart keeps its branch colours. The scale spans the colour values of the
whole tree, so drilling never changes a colour. A node is never coloured
from its children: a data mark without its own `colorValue` is drawn in a
neutral "no value" paint and says so in the tooltip and the table. Under
a measure, `node.color` no longer paints a data mark (it is reported); a
treemap's group headers keep their branch colours.

**ColorStop**

```ts
interface ColorStop {
  value: number;
  color: string;
}
```

One colour of a continuous scale, at a value of the data.

**LinearColorScale**

```ts
interface LinearColorScale {
  type?: 'sequential' | 'diverging';
  min?: number;
  max?: number;
  mid?: number;
  colors?: readonly [string, string] | readonly [string, string, string];
}
```

A sequential or diverging scale. Fix `min` and `max` to compare charts or
hold a business threshold: equal values then get equal colours in every
chart with the same scale, whatever each one's data. A value beyond a
fixed end takes that end's colour; its own value stays everywhere it is
shown, and the scale marks the end `≤` or `≥`.

**QuantitativeColorScale**

```ts
type QuantitativeColorScale =
  LinearColorScale | StopsColorScale | ClassesColorScale;
```

How a measure becomes a colour. One of three forms, chosen by `type`:

- `'sequential'` (default) and `'diverging'`: two colours from `min` to
`max`, or three around a centre `mid` ({@link LinearColorScale}).
- `'stops'`: any number of colours at values of the data
({@link StopsColorScale}).
- `'classes'`: named ranges of values, each one colour
({@link ClassesColorScale}).

The domain is the chart's whole data (every cell, every node of the tree),
never a zoomed or drilled part of it. A missing value is never on a scale:
it is never 0 and never widens or classifies anything. A value the scale
cannot reach keeps its own number everywhere it is shown (tooltip, label,
table, announcement, export). A configuration that cannot be drawn as
declared is reported once through the chart's diagnostics and drawn as the
nearest safe scale.

**StopsColorScale**

```ts
interface StopsColorScale {
  type: 'stops';
  stops: readonly ColorStop[];
}
```

A continuous scale of two or more colours at values of the data: a value
between two stops mixes their colours by where it lies between them, so
stops may lie irregularly (a business threshold at 100, a reserve target
at 125). The first and the last stop are the ends of the scale: a value
beyond them takes the end's colour, keeps its own number, and the scale
marks that end `≤` or `≥`. Stops are read in value order; a stop that is
not finite, or repeats a value, is reported and left out. A sequential
scale is two stops, a diverging one three.