gradient

задает градиент для элементов диаграммы

boolean|string|function gradient;

Example

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

Related samples

Basic Coloring

Details

Свойство применимо только к столбцовой и круговой диаграммам.

Гистограммы

В столбцовых диаграммах свойство может быть задано:

строкой
функцией

Типы градиента

В Webix определены несколько типов градиента для диаграмм:

'light' (значение по умолчанию)
'3d'
'rising'
'falling'

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

Related sample: Chart: XML Dataset

Создание своего градиента

Чтобы задать свой тип градиента, определите свойство как функцию. Функция принимает 1 параметр - объект градиента элемента canvas внутри компонента. Чтобы назначить цвета объекту градиента, вы можете использовать метод addColorStop(position, color). У этого метода 2 параметра:

position - число от 0.0 до 1.0, которое определяет относительное положение цвета в градиенте
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

Круговые диаграммы

В круговых диаграммах gradient может быть только boolean:

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

Related sample: Donut Pie Chart