This website is for Vega-Lite v4. Go to the main Vega-Lite homepage for the latest release.

Gradient

Edit this page

A gradient definition specifies a gradient color pattern. Vega-Lite supports either a linear gradient or a radial gradient.

For example:

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

Linear Gradient

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
gradient String

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

stops GradientStop[]

Required. An array of gradient stops defining the gradient color sequence.

Example: Gradient Area Plot

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

Radial Gradient

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
gradient String

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

stops GradientStop[]

Required. An array of gradient stops defining the gradient color sequence.

Gradient Stop

A gradient stop consists of a Color value and an offset progress fraction.

Property Type Description
color Color

Required. The color value at this point in the gradient.

offset Number

Required. The offset fraction for the color stop, indicating its position within the gradient.