Navigation:  User Interface >

Gradient Editor

Previous pageReturn to chapter overviewNext page

The Gradient Editor can be used to add a gradient pattern to a color. You can open the Gradient Editor in the Property Wizard or Property Editor by clicking on the gradient property. The gradient property is part of many other property groups like barStyle, areaStyle, ringStyle, etc.


Gradient Edtor in SmartCharts

The Gradient Editor




This is the Color Picker. With the Color Picker you can choose a color by moving the black triangles with your mouse. In the first rectangle you can pick the base color. In the second triangle you can set the brightness of the color and in the third rectangle you can set the transparency (alpha value) of the color. The Color Picker is linked to the active handle (little triangle at the bottom)

series colors

If you choose to use the series colors, then the colors of the chart series will be used and not the base color from the first rectangle in the Color Picker. The brightness and transparency still can be defined by the Color Picker (see above)

Linear mode versus radial mode

There are two types of gradients: linear gradient and radial gradient. Using this check box you can choose which one you would like to use.

Add button

Press this button to expand the gradient with one color. A handle will be added to the bottom rectangle.

Delete button

Press this button to delete the most right color from the gradient definition.

Rotation of gradien 

You can change the rotation angle of the gradient. See below for an example.

Gradient in SuperGraphs

This is the resulting gradient pattern. In this examples the gradient consists of three parts. Every part is depicted by a handle, a small triangle. Click with your mouse on the handle to make it active. An active handle will be shown with a red line around it.




tipbulbIn order to show the gradient pattern,  make sure that property hasGradientFill is active. hasGradientFill is part of the colors property.




A default gradient has three colors, that can be changed using one of the three handles (little triangles). If you press the Add button a color will be added and the Gradient Editor will look like in the picture on the right.

Gradient example



If you change the Rotation from 0 degrees to 45 degrees the gradient will look like in this picture.

Gradient example with rotation


If you uncheck the Linear option, then the gradient will change to a Radial form like in this picture.

Gradient Example with radial gradient