The library supports different color variations. If color makes no matter, developer can use a default value. Otherwise, color can be specified with the definite value or with a function.
In this case all chart elements have one color. The method is more appropriate for Bar charts than for Pie charts.
var chart = new dhx.ui({ view:"chart", type:"bar", ... color:"#66cc33", ... })
Related sample: 07_chart/02_color/01_custom.html
In this case, color of chart's elements is specified with a template (instead of some fixed value) as a color property :
/*color is set in data object*/ var data = [ { sales:"7.3", year:"2008", color:"#880000"}, { sales:"4.8", year:"2009", color:"#000088"} ]; var chart1 = new dhx.ui({ view:"chart", ... color:”#color#” ... }) /*colors are set depending on object values*/ var chart2 = new dhx.ui({ view:"chart", ... color:function(obj){ if (obj.sales > 5) return "#ff9900"; return "#66cc00"; } ... }) /*alternative colors*/ var chart3 = new dhx.ui({ view:"chart", ... color:function(obj){ index++; if (index % 2) return "#ff9900"; return "#66cc00"; } ... });
Related sample: 07_chart/02_color/02_function.html
Bar charts allow to define color gradient for bars. It can be done by using a function that takes a gradient object as an argument.
In this case we can assign colors to the gradient object by using the addColorStop() method:
addColorStop(position, color)
var chart = new dhx.ui({ view:"chart", ... gradient:function(gradient){ gradient.addColorStop(0.0,"#FF0000"); gradient.addColorStop(0.8,"#FFFF00"); gradient.addColorStop(1.0,"#00FF22"); } ... })
Related sample: 07_chart/02_color/03_gradient.html