PDA

View Full Version : How to change line chart legend name color and height



gouthamrv
24 Feb 2013, 3:07 PM
I have a line chart as shown below. Currently line size in the graph is same as in the legend, but I want to have different height and width for line that is in the legend. How do I do that?

scottmartin
26 Feb 2013, 9:46 AM
Have a look at labelColor, labelFont:



legend: {
position: 'right',
labelColor: 'red'
},


Scott

gouthamrv
26 Feb 2013, 10:53 AM
Hi Scott,

My ExtJS version is 4.0.7, I don't see labelColor config option. And I want to have different colors for each legend. Is this possible?

scottmartin
26 Feb 2013, 10:55 AM
Each item in the legend?

gouthamrv
26 Feb 2013, 11:06 AM
Yes, if there are 4 lines in the chart, I want to have different color for each legend. For ex: legend1 with red, legend2 with yellow etc..

scottmartin
26 Feb 2013, 11:41 AM
You would have to create an override:



Ext.override(Ext.chart.LegendItem, {
createLegend: function(config) {

// ext 4.0.7
label = me.add('label', surface.add({
type: 'text',
x: 20,
y: 0,
zIndex: z || 0,
font: legend.labelFont,
text: getSeriesProp('title') || getSeriesProp('yField')
}));

// changes in ext 4.1 to change all labels to a color
label = me.add('label', surface.add({
type: 'text',
x: 20,
y: 0,
zIndex: (z || 0) + 2,
fill: legend.labelColor,
font: legend.labelFont,
text: getSeriesProp('title') || getSeriesProp('yField'),
style: {
'cursor': 'pointer'
}
}));

}
});


You would have to make changes so each label had it's own color

Scott.

riku351
28 Oct 2013, 12:56 AM
Hi Scott,

I want to change the color of each legend item that gets appended before legend text.
The color,I want to use instead of default color is coming from service layers.

I am using custom color for each series.46587