Extjs alter label in chart(bar,pie...) - extjs

Question

How can i alter the label over a sprite?I found that inside series i can have the following and i can alter the renderer but the problem is that i also need the corresponding storeitem.
label: {
display: 'insideEnd',
field: 'litres',
renderer: function(n) {
return n;
},
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
}
I also found here that there are two functions: onCreateLabel and onPlaceLabel but i don't find the way to use them.
Any help?

Answer 1

onCreateLabel and onPlaceLabel are used in series config. You have to do something like this:
series: [{
// ...
label: {
field: 'data1',
renderer: function(val) {
return val;
}
},
onCreateLabel: function(storeItem, item, i, display) {
var me = this,
group = me.labelsGroup,
config = me.label,
bbox = me.bbox,
endLabelStyle = Ext.apply(config, me.seriesLabelStyle);
return me.chart.surface.add(Ext.apply({
'type': 'text',
'text-anchor': 'middle',
'group': group,
'x': item.point[0],
'y': bbox.y + bbox.height / 2
}, endLabelStyle || {}));
},
onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
var me = this,
chart = me.chart,
resizing = chart.resizing,
config = me.label,
format = config.renderer,
field = config.field,
bbox = me.bbox,
x = item.point[0],
y = item.point[1],
bb, width, height;
label.setAttributes({
text: format(storeItem.get(field[index])),
hidden: true
}, true);
bb = label.getBBox();
width = bb.width / 2;
height = bb.height / 2;
x = x - width < bbox.x? bbox.x + width : x;
x = (x + width > bbox.x + bbox.width) ? (x - (x + width - bbox.x - bbox.width)) : x;
y = y - height < bbox.y? bbox.y + height : y;
y = (y + height > bbox.y + bbox.height) ? (y - (y + height - bbox.y - bbox.height)) : y;
if (me.chart.animate && !me.chart.resizing) {
label.show(true);
me.onAnimate(label, {
to: {
x: x,
y: y
}
});
} else {
label.setAttributes({
x: x,
y: y
}, true);
if (resizing) {
me.animation.on('afteranimate', function() {
label.show(true);
});
} else {
label.show(true);
}
}
}
// ...
}
Copy and Paste onCreateLabel and onPlaceLabel from the code above (or the ExtJS source) then change them the way you want.