View Full Version : Setting color for the line in line series chart in extjs 4.2

11 Oct 2013, 5:13 AM
I was trying to set custom color for the line series in extjs chart.
The thing is the color gets affected only to the dots and not to the whole line.
I am using renderer config in line series to achieve this.
Here is the code snippet:

{ type: 'line', axis: 'left', //fill: true, //fillOpacity: 0.5, xField: 'month', yField: 'plan_cost', renderer: function (sprite, record, attr, index) { var color = '#faf56c';//RED COLOR return Ext.apply(attr, { fill: color }); } }

This is how it appears:


What should I do to change the line color too? Help!:s

11 Oct 2013, 5:32 AM
you can define a theme and then use it in your chart:

var colorsArray = ['rgb(255,200,100)', 'rgb(223,32,47)', 'rgb(36,219,64)'];
Ext.chart.theme.MyTheme = Ext.extend(Ext.chart.theme.Base, {
constructor: function (config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: colorsArray
}, config));

Ext.create('Ext.chart.Chart', {
theme: 'MyTheme',
// rest of your chart code

If you just have one line, it will take the first color in colorsArray. you can add as many colors as you like in this array (according to the number of lines you want to show).

13 Oct 2013, 9:25 PM
Hi Farish, thanks for the solution. It works :). But the more easier way I found out was this:

style: { stroke: '#ff0000', fill: '#ff0000' }

13 Oct 2013, 10:46 PM
thanks for sharing