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.