Skip to main content
Version: 6.1

Gradients

A gradient is a special type of image that consists of a progressive transition between two or more colors.

The gradient data type is defined with one of the types listed below.

  • Linear where transitions colors progressively along an imaginary line.
  • Radial where transitions colors progressively from a center point (origin).

As with any interpolation involving colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of gray from appearing when both the color and the opacity are changing.

Charba enables the usage of gradient providing some helpful configuration in order to enable you to do not use any dimensions or calculate them.

The gradient is mapped in the Gradient, which can configure both linear and radial gradients.

A Gradient can be created only by a gradient builder in order to optimize the cache used for them.

// creates a dataset
LineDataset dataset = new LineDataset();
// creates a gradient
// setting the 2 colors and their offset
Gradient gradient = GradientBuilder.create(GradientType.LINEAR, GradientScope.CHART).
addColorStop(0, HtmlColor.ORANGE).addColorStop(1, HtmlColor.PURPLE).build();
// sets the gradient as background color of the dataset
dataset.setBackgroundColor(gradient);
// fills the dataset
dataset.setFill(Fill.origin);

Types

Every gradient must be created setting which type represents. The gradient type must be passed to constructor of new gradient. If omitted, the default is linear.

Orientation

The Charba gradient implementation doesn't provide you to define the imaginary line or the direction from center but provides you a predefined sets of value, which can be used to create the canvas gradient.

The orientation values of the imaginary line or the direction from/to center are defined in an enumeration, gradient orientation.

NameTypeDescription
TOP_DOWNLINEARFrom top to bottom (vertical)
BOTTOM_UPLINEARFrom bottom to to (vertical)
LEFT_RIGHTLINEARFrom left to right (horizontal)
RIGHT_LEFTLINEARFrom right to left (horizontal)
TOP_RIGHTLINEARFrom top(left) to right(bottom) (diagonal)
BOTTOM_LEFTLINEARFrom bottom(right) to left(top) (diagonal)
TOP_LEFTLINEARFrom top(right) to left(bottom) (diagonal)
BOTTOM_RIGHTLINEARFrom bottom(left) to right(top) (diagonal)
IN_OUTRADIALFrom center to the borders
OUT_INRADIALFrom borders to the center

Scope

The Charba gradient implementation doesn't provide you to define the imaginary line or the direction from center but provides you a predefined sets of value, which can be used to create the canvas gradient.

The dimension of the area to use to calculate the gradient are defined in an enumeration, gradient scope.

NameDescription
CANVASUses the whole dimension of canvas
CHARTUses the whole dimension of chart

Adding colors

To complete a gradient configuration, you need to set a list of colors, adds a new color stop to the gradient, setting the offset, as value between 0 and 1 for where the color stop is located, and the color at the stop.

The gradient builder provides the methods to add colors, building the Gradient, as following:

// creates a gradient     
// setting the 2 colors and their offset
Gradient gradient = GradientBuilder.create(GradientType.LINEAR, GradientScope.CHART)
.addColorStop(0, HtmlColor.ORANGE)
.addColorStop(0.5, HtmlColor.YELLOW)
.addColorStop(1, HtmlColor.PURPLE).build();
// creates a gradient
// setting the 2 colors directly
// with offset 0 and 1
Gradient gradient = GradientBuilder.create(GradientType.RADIAL, GradientScope.CANVAS)
.addColorsStartStop(HtmlColor.ORANGE, HtmlColor.PURPLE).build();

Resizing

Charba recalculates the gradients every time the dimension of chart or canvas occurs. In this way it maintains always the gradients even if the chart has got a different size comparing with it at creation time.