Using Gradients in Graphs

A gradient is a special effect in which an object changes color gradually. Any object that has an SFX property can use a gradient. This includes the plot area, the legend, the pie frame, the parts of the three-dimensional frame, the series object (for a series bars in a bar graph, for example), and the exceptional riser (for a single marker in a graph).

Specifying a gradient for an object

To display a gradient in an object, get the SFX object for the object and set the FillType property of the SFX to BaseGraphComponent.FT_GRADIENT. The following line of code specifies a gradient for the plot area of a graph.


graph.getPlotArea().getSFX().setFillType(BaseGraphComponent.FT_GRADIENT);

Gradient colors and direction

Each color in a gradient is represented by a stop. The first stop is stop 0; the second is stop 1, and so on. The gradient starts at stop 0 and ends at the last stop. By default, a gradient has three stops, and the gradient direction is BaseGraphComponent.GD_RIGHT. With these defaults, the gradient starts with blue on the left at stop 0, changes to white at stop 1 in the middle, and then changes to black at stop 2 on the right, as shown in the following figure.

default gradient colors and direction; described in text

Specifying the gradient direction

To change the direction of the gradient, set the GradientDirection property to one of the following values:

To reverse the direction of a gradient, set the GradientReversed property to true. So, for example, if you want a gradient that goes from the lower right corner to the upper left corner, then use code like the following:


SFX sfx = graph.getPlotArea().getSFX(); sfx.setGradientDirection(BaseGraphComponent.GD_DIAGONAL_135); sfx.setGradientReversed(true); sfx.setFillType(BaseGraphComponent.FT_GRADIENT);

Setting the colors in the gradient

To change the color of a stop, call setGradientStopColor, passing the color that you want and the index of the stop that you want to change. For example, if you want the gradient to start with yellow, then use a call like this:


SFX sfx = graph.getPlotArea().getSFX(); sfx.setStopColor(Color.yellow, 0); sfx.setFillType(BaseGraphComponent.FT_GRADIENT);

To specify the number of colors in the gradient, call setGradientNumStops. For example, to use only two colors, set GradientNumStops to 2.

Adjusting the color change in a gradient

By default, the graph positions the stops equidistant from each other. If you have three stops, then stop 1, which represents the middle color, appears in the middle of the gradient. To change where this color appears, call the setGradientStopPosition method. By default, position 0 is at stop 0; position 100 is at stop 1. The middle of the gradient is position 50. If GradientReversed is true, however, then position 0 is at the last stop.

Example: Fading from one color to another

The following code sets the plot area of the graph so that the color changes from yellow in the lower left corner to white in the upper right corner. This code assumes that you have a graph that is named graph.


// get the SFX for the PlotArea SFX sfx = graph.getPlotArea().getSFX(); // set the direction sfx.setGradientDirection(BaseGraphComponent.GD_DIAGONAL_135); sfx.setGradientReversed(true); // set the number of stops sfx.setGradientNumStops(2); // set the stop colors sfx.setGradientStopColor(Color.red, 0); sfx.setGradientStopColor(Color.white, 1); // set the SFX to use the gradient sfx.setFillType(BaseGraphComponent.FT_GRADIENT);

The resulting gradient looks like the gradient in the following figure.

graph from previous code; described in text