ExtJS Column Chart Label Using display: 'outside' Not Working

Question

With ExtJS (4.2), I'm trying to simply display a label outside on top of each column in a column chart. This is a small snip of what I have:

label: {
    field: 'value',
    display: 'outside',
    orientation: 'horizontal',
    font: 'bold 12px Arial'
}

In this case, no labels are shown at all anywhere on the chart on any of the columns.

However, if I change the display value to 'insideEnd', all the labels display fine inside the top of each column. If I change the display value to 'insideStart', all the labels display fine inside the bottom of each column. It just seems to not work as soon as I set it to 'outside'.

I've tried narrowing down the problem by adding a custom renderer function to the above code, and noticed that that function isn't even run when display is set to 'outside', however it does run if I change display to 'insideEnd' or 'insideStart'. It's almost like as soon as it sees 'outside', it just skips over the renderer and does nothing.

I'm stumped. Any ideas as to what might be causing this?

Edit (SOLVED): The reason is I had the column chart series's stacked set to true.

stacked: true

I guess outside won't work with stacked column charts.

Scriptable Scriptable · Accepted Answer · 2015-01-15T10:25:49

Using the same label config as yourself in this fiddle and the labels are showing and in the correct place. Can you provide a fiddle with your exact code and I will update this answer to help. The code I'm using in this fiddle is below for future reference.

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.layout.container.Fit', 'Ext.fx.target.Sprite', 'Ext.window.MessageBox']);

Ext.onReady(function() {

    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [{
            'name': 'metric one',
            'data': 10
        }, {
            'name': 'metric two',
            'data': 7
        }, {
            'name': 'metric three',
            'data': 5
        }, {
            'name': 'metric four',
            'data': 2
        }, {
            'name': 'metric five',
            'data': 27
        }]
    });

    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        animate: true,
        store: store,
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['data'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }],
        series: [{
            type: 'column',
            axis: 'left',
            highlight: true,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
                }
            },
            label: {
                display: 'outside',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'horizontal',
                font: 'bold 12px Arial',
                color: '#333'
            },
            xField: 'name',
            yField: 'data'
        }]
    });
});

Your issue might be down to the series / other chart config, but you haven't shown that.

ExtJS Column Chart Label Using display: 'outside' Not Working

1 Answers