Color axis

Minimal example

This example demonstrates how to use a color axis. By default, a color axis interpolates colors between color0 (green in this example) to color1 (yellow in this example). If the data value is less/greater than the min/max value of the axis, the colors colorBelow/colorAbove (blue/red in this example) are used.

The esssential part of the code (only for the points) is as follows:

Using more than two colors

The following example shows how to use more than two colors on a color axis. The properties stop1, stop2 and stop3 specify a relative position (between 0 to 1) where min and max correspond to 0 and 1 respectively.

The interval [0, stop1] shows a gradient from color0 to color1
The interval [stop1, stop2] shows a gradient from color1 to color2
...
The final interval [stop3, 1] shows a gradient from color3 to color4

data value in the example	relative position in the example	corresponding property	value of the property in the example
< 0	< 0	`colorBelow`	■ blue
0 (`min`)	0	`color0`	■ black
10	0.25 (`stop1`)	`color1`	■ yellow
20	0.50 (`stop2`)	`color2`	■ green
30	0.75 (`stop3`)	`color3`	■ magenta (#f0f)
40 (`max`)	1	`color4`	■ white
> 40	> 1	`colorAbove`	■ red