gradient of ui.chart, Properties Webix Docs

specifies the chart gradient

boolean|string|function gradient;

Example

webix.ui({
    view:"chart",
    type:"bar",
    gradient:"falling",
    ...
})

Related samples

Basic Coloring

Details

The property is applicable only to the bar, pie charts

Bar charts

In bar charts the property can be defined as:

a string
a function

String definition

As a string, the property takes one of predefined values, which are:

'light' (default value)
'3d'
'rising'
'falling'

webix.ui({
    view:"chart",
    type:"bar",
    gradient:"rising",
    ...
})

Related sample: Chart: XML Dataset

Function definition

As a function, the property accepts 1 parameter - a canvas gradient object.
You may use the addColorStop(position, color) method to assign the required colors to the gradient object:

addColorStop(position, color)
- position - a number between 0.0 and 1.0 that defines the relative position of the color in the gradient
- color - a string representing a CSS color

webix.ui({
    view:"chart",
    type:"bar",
    gradient:function(gradient){
        gradient.addColorStop(0.0,"#FF0000");
        gradient.addColorStop(0.8,"#FFFF00");
        gradient.addColorStop(1.0,"#00FF22");
    },
    ...
})

Related sample: Color Gradient

Pie Charts

In pie charts the property can have only a boolean value.

The true value enables the gradient in the chart:

webix.ui({
    view:"chart",
    type:"pie",
    gradient:true
    ...
})

Related sample: Donut Pie Chart