extjschartslabel

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


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 haven't found a way to use them. What can I try next?


Solution

  • 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.