PDA

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



Harshrossi
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:

46289

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

Farish
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).

Harshrossi
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' }

Farish
13 Oct 2013, 10:46 PM
thanks for sharing