Gradients in Chart Background

As opposed to marker gradients, background gradients are used for cosmetic purposes only. In other words, background gradients are only used to enhance the chart's visual appearance and have no direct relation to the data contained in the chart.

In Chart FX for Java, gradients can be applied to 2 rectangular areas in the chart area: The chart's inside background and the main background.

Chart FX for Java allows horizontal, vertical, diagonal and radial gradients when applying gradient fills to either of these areas of the chart.

In order to create background gradients, you can use the Chart FX for Java Wizard, or you can use Chart FX for Java objects and its properties to create and display gradient fills.

By default, the color in a linear gradient changes uniformly. However, in this chapter you will learn how to use the Chart FX for Java API so you can create and customize linear gradients so that the color may change in a non-uniform fashion.

Creating a gradient object

Creating a gradient object is no more than instantiating an object from the ChartFX.Borders.dll called GradientBackground. The following code creates a new variable and instantiates a new gradient object:


// Create and instantiate the object
GradientBackground myGradient =
new GradientBackground(GradientType.BACKWARD_DIAGONAL);

Please note the GradientBackground object constructor receives a parameter indicating the type of gradient you want to create. Your development environment InstelliSense feature should help you choose your desired gradient effect.

Assigning the gradient object to any of the chart backgrounds

Once you have created the gradient object you can set properties like colors and positions. This topic is covered in detail in the following sections. Once these properties have been set, you will need to assign the gradient object to the appropriate chart background.

To assign the gradient to the chart inside background, your code will look as follows:


// Create and instantiate the object
GradientBackground myGradient =
new GradientBackground(GradientType.FORWARD_DIAGONAL);
chart1.setInsideBackObject(myGradient);

Or, to assign the gradient to the chart main background, you will use the BackObject and it is important you remember to set the Inside background to a transparent color so the gradient is visible across the entire chart area, as follows:


// Create and instantiate the object
GradientBackground myGradient =
new GradientBackground(GradientType.FORWARD_DIAGONAL);
chart1.setBackObject(myGradient);
chart1.setInsideColor(java.awt.Color(0,0,0,0));

Manipulating gradient colors, positions

Once the gradient object has been instantiated, you can manipulate the object's properties to set visual attributes like colors, positions and color intensity. The following section will show you how to create multicolor and bi-color gradients.

Essentially, a gradient object provides a Color array property that you can use to set the colors you want for your gradient. These colors will then be uniformly blended in the chart's background by dividing the bounding rectangle into equal sections and blending from one color to another in the Color array. For example, you can set the following color array for your gradient:


// Create and instantiate the object
GradientBackground myGradient =
new GradientBackground(GradientType.FORWARD_DIAGONAL);
// Filling the color array
myGradient.setColor(0, java.awt.Color.blue);
myGradient.setColor(1, java.awt.Color.red);
myGradient.setColor(2, java.awt.Color.yellow);
myGradient.setColor(3, java.awt.Color.green);
chart1.setInsideBackObject(myGradient);

The preceding code, if applied to the chart's inside background will create a Forward Diagonal gradient with 3 regions that will blend uniformly:

1) from Blue to Red

2) from Red to Yellow

3) from Yellow to Green

If this arrangement is not convenient, you may alter the positions of each blending area by using the Position array supported by the GradientBackground object.

To understand how positions work in the bounding rectangle, imagine the first position (where the gradient starts) as position 0; the ending position would then be 1 and then intermediate positions would be fractions between 0 and 1.

For example, in our previous example if we wanted the gradient from blue to red to occupy only 10% of the bounding rectangle and the gradient from Red to Yellow to fill 70% of the area, we could have used the Position array as follows:


// Create and instantiate the object
GradientBackground myGradient =
new GradientBackground(GradientType.FORWARD_DIAGONAL);
// Filling the color array
myGradient.setColor(0, java.awt.Color.blue);
myGradient.setColor(1, java.awt.Color.red);
myGradient.setColor(2, java.awt.Color.yellow);
myGradient.setColor(3, java.awt.Color.green);
// Filling the Position array
myGradient.setPosition(0, 0);
myGradient.setPosition(1, 0.1);
myGradient.setPosition(2, 0.8);
myGradient.setPosition(3, 1);
chart1.setInsideBackObject(myGradient);

Bi-Color Gradients

In some cases, you may want to work with bi-color gradients and simply repeat a gradient pattern across the chart's background. If this is the case, instead of defining a Color array with the 2 same colors over and over, you can simply create a bi-color gradient.

A bi-color gradient requires Position and Factor (color intensity) arrays to display a repeating pattern across the chart's background. Previously we described the effect the Position array had on the gradient. In bi-color gradients a new Factor array must be defined to instruct Chart FX for Java on the color intensity on each position.

To understand the Factor array, consider that the values it takes are a fraction between the 2 colors in the color array. If set to 0, then the resulting color will be the color available in the position 0 of the Color array and similarly with a value of 1.

For example take a closer look at the Factor array and the effect it creates on the gradient in the following 2 samples:


myGradient.setColor(0, java.awt.Color.white);
myGradient.setColor(1, java.awt.Color.blue);
myGradient.setPosition(0, 0);
myGradient.setPosition(1, (float) 0.25);
myGradient.setPosition(2, (float) 0.75);
myGradient.setPosition(3, 1);
myGradient.setFactor(0, 0);
myGradient.setFactor(1, 1);
myGradient.setFactor(2, 0);
myGradient.setFactor(3, 1);


myGradient.setColor(0, java.awt.Color.white);
myGradient.setColor(1, java.awt.Color.blue);
myGradient.setPosition(0, 0);
myGradient.setPosition(1, (float) 0.25);
myGradient.setPosition(2, (float) 0.75);
myGradient.setPosition(3, 1);
myGradient.setFactor(0, 0);
myGradient.setFactor(1, (float) 0.8);
myGradient.setFactor(2, (float) 0.9);
myGradient.setFactor(3, 0);

Please note the Factor array does not apply to multicolor gradients (3 or more colors).