PDA

View Full Version : Chart legend



blade226
12 Jul 2012, 5:05 AM
Hi,
i created a pie chart with legend. Now I want to display other values in legend as on the pie chart. i have a store with 3 values.
1: team (team)
2: number (anzahl)
3: description (prozent)


Ext.create('Ext.chart.Chart', {
width: 800,
height: 600,
animate: true,
shadow: true,
store: mystore15,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'anzahl',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
mystore15.each(function(rec) {
total += rec.get('anzahl');
});
this.setTitle(storeItem.get('anzahl') + ' Personen = ' + Math.round(storeItem.get('anzahl') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'team',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]});

Is this possible and how?

Gautham Suriya
15 Oct 2012, 4:17 AM
You can try overriding createLegend method in chart.LegentItem class. And add label like this

label = me.add('label', surface.add({
type: 'text',
x: 20,
y: 0,
zIndex: (z || 0) + 2,
fill: legend.labelColor,
font: legend.labelFont,
text: your_Value,
style: {
'cursor': 'pointer'
}
}));