gradient

specifies the chart gradient

boolean|string|function gradient;

Example

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

Related samples

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

See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix best ui framework and page of chart library product.