PDA

View Full Version : Line series color



campersau1
11 Sep 2011, 2:20 AM
Hi,

I tried to create my own chart theme and it works great for bar/column/pie charts.
But the colors for line charts are not the ones that I wanted.

So here is my theme:


Ext.define("MyTheme", {
extend : "Ext.chart.theme.Base",


constructor : function(config) {
this.callParent([
Ext.apply({
axis : {
fill : "#000",
"stroke-width" : 1
},
axisLabelTop : {
fill : "#000",
font : "11px Arial"
},
axisLabelLeft : {
fill : "#000",
font : "11px Arial"
},
axisLabelRight : {
fill : "#000",
font : "11px Arial"
},
axisLabelBottom : {
fill : "#000",
font : "11px Arial"
},
axisTitleTop : {
fill : "#000",
font : "bold 6px Arial"
},
axisTitleLeft : {
fill : "#000",
font : "bold 16px Arial"
},
axisTitleRight : {
fill : "#000",
font : "bold 16px Arial"
},
axisTitleBottom : {
fill : "#000",
font : "bold 16px Arial"
},
series : {
"stroke-width" : 1
},
seriesLabel : {
font : "12px Arial",
fill : "#000"
},
marker : {
stroke : "#555",
fill : "#000",
radius : 3,
size : 3
},
colors : [
"#FFE500",
"#FFCC00",
"#FFB200",
"#FF9900",
"#FF8000",
"#FF6600"
],
seriesThemes : [{
fill : "#FFE500"
}, {
fill : "#FFCC00"
}, {
fill : "#FFB200"
}, {
fill : "#FF9900"
}, {
fill : "#FF8000"
}, {
fill : "#FF6600"
}],
markerThemes : [{
fill : "#FF6600",
type : "circle"
}, {
fill : "#FF8000",
type : "cross"
}, {
fill : "#FF9900",
type : "plus"
}]
}, config)
]);
}
}, function() {
// register the theme
Ext.chart.theme.MyTheme = MyTheme;
});


And the line charts currently look like this:
27996
As you can see the color is gray and not the ones I have specified abouve (yellow to orange to red like)

But if I hover over the label in the legend it shows the right color.
27997

So what do I need to add that the color of the unhighlighted line is the same as the highlighted?

Thanks!