Documentation

gradient

specifies the chart gradient

boolean|string|function gradient;

Example

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

See also

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 propperty 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 bool value.

The true value enables the gradient in the chart:

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

Related sample:  Donut Pie Chart

Back to top