Color Effects

Chart elements can be colored in various way, fixed color being defined by the color parameter that takes hex code. By default items are colored in a rainbow manner.

Custom color

Different color for items can be defined in the dataset already.

var data=[
    { id:1, sales:20, year:"02", color: "#ee4339"}
];
 
webix.ui({
    view:"chart",
    type:"bar",
    value:"#sales#",
    color:"#color#", 
    ...
})

Related sample:  Basic Coloring

Color Template(Function)

If you want chart elements being colored according to a specific criterion, you should define colors with the help of a function.

Here sales bars are distinguished by sales amount.

webix.ui({
    view:"chart",
    type:"bar",
    value:"#sales#",
    color:function(obj){
        if (obj.sales > 60)
            return "#f6960a";
        else
            return "#0ab6f6";
    }
})

Related sample:  Specifying Color as a Function

Color Gradient

Gradient can be applied to bar and pie charts. It doesn't contain any information about the data, still it make the chart look more stylish and attractive.

Gradient property can take the following values:

  • boolean - true or false, the easiest way to enable/disable gradient;
  • string - "falling", "rising" to the direction of color shade; "light" and "3D" to add style effects for gradient;
  • function.

Colors for gradient are defined with the help of a addColorStop() method that takes gradient position (a number between 0.0 and 1.0) and desired color codes as parameters.

gradient:function(gradient){
    gradient.addColorStop(1.0,"#FF0000");
    gradient.addColorStop(0.2,"#FFFF00");
    gradient.addColorStop(0.0,"#00FF22");
}

Related sample:  Color Gradient

By default gradient is disabled in the pie chart, so you need to enable it by assigning truevalue for the gradient parameter.

Back to top