For example:

``````{
"stops": [
{"offset": 0.0, "color": "red"},
{"offset": 0.5, "color": "white"},
{"offset": 1.0, "color": "blue"}
]
}
``````

A linear gradient interpolates colors along a line, from a starting point to an ending point. By default a linear gradient runs horizontally, from left to right. Use the x1, y1, x2, and y2 properties to configure the gradient direction. All coordinates are defined in a normalized [0, 1] coordinate space, relative to the bounding box of the item being colored.

Property Type Description

Required. The type of gradient. Use `"linear"` for a linear gradient.

x1 Number

The starting x-coordinate, in normalized [0, 1] coordinates, of the linear gradient.

Default value: `0`

x2 Number

The ending x-coordinate, in normalized [0, 1] coordinates, of the linear gradient.

Default value: `1`

y1 Number

The starting y-coordinate, in normalized [0, 1] coordinates, of the linear gradient.

Default value: `0`

y2 Number

The ending y-coordinate, in normalized [0, 1] coordinates, of the linear gradient.

Default value: `0`

Setting the area plot’s `color` encoding to `"linear"` gradient value produces a gradient area plot

A radial gradient interpolates colors between two circles, from an inner circle boundary to an outer circle boundary. By default a radial gradient runs from the center point of the coordinate system (zero radius inner circle), out to the maximum extent (0.5 radius outer circle). Use the x1, y1, x2, and y2 properties to configure the inner and outer circle center points, and use the r1 and r2 properties to configure the circle radii. All coordinates are defined in a normalized [0, 1] coordinate space, relative to the bounding box of the item being colored. A value of 1 corresponds to the maximum extent of the bounding box (width or height, whichever is larger).

Property Type Description

Required. The type of gradient. Use `"radial"` for a radial gradient.

x1 Number

The x-coordinate, in normalized [0, 1] coordinates, for the center of the inner circle for the gradient.

Default value: `0.5`

x2 Number

The x-coordinate, in normalized [0, 1] coordinates, for the center of the outer circle for the gradient.

Default value: `0.5`

y1 Number

The y-coordinate, in normalized [0, 1] coordinates, for the center of the inner circle for the gradient.

Default value: `0.5`

y2 Number

The y-coordinate, in normalized [0, 1] coordinates, for the center of the outer circle for the gradient.

Default value: `0.5`

r1 Number

The radius length, in normalized [0, 1] coordinates, of the inner circle for the gradient.

Default value: `0`

r2 Number

The radius length, in normalized [0, 1] coordinates, of the outer circle for the gradient.

Default value: `0.5`