gradient

specifies the chart gradient

Example

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

Related samples

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