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.

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

See also: