Stacked barchart series labels are not placed and colored correctly

[mvoss]

Ext version tested

Ext 4.1


Browser version tested

Chrome 24
Firefox 19


Description:

When stacking a barchart the series label color and display have no effect. It seems like the only display config option working correctly is "insideEnd". For the options "middle" and "insideStart" the label is still shown at the end of each bar.

Also I have specified color: "#fff" The labels are still displayed in black.


Steps to reproduce the problem:

Run the provided code


The result that was expected:

The label should is show in the middle of each stacked bar and in color white


The results that occurs instead:

The label should is show at the end of each stacked bar and in color black


Test case:

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


Ext.onReady(function () {
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['label', 'a1', 'a2', 'a3', 'a4', 'a5', 'a6'],
        data: [
                {label: 1, a1: 1, a2: 1, a3: 48, a4: 20, a5: 5, a6: 25},
                {label: 2, a1: 25, a2: 5, a3: 20, a4: 25, a5: 15, a6: 10},
                {label: 3, a1: 5, a2: 50, a3: 10, a4: 10, a5: 5, a6: 20},
                {label: 4, a1: 20, a2: 5, a3: 10, a4: 10, a5: 50, a6: 5}
              ]
    });


	var colors = ['#8C0000',
              '#FE8811',
              '#FDCD3E',
              '#87C047',
              '#539312',
			  '#ffffff'];


	Ext.define('Ext.chart.theme.OUS', {
		extend: 'Ext.chart.theme.Base',


		constructor: function(config) {
			this.callParent([Ext.apply({
				colors: colors
			}, config)]);
		}
	});


    var chart = Ext.create('Ext.chart.Chart',{
            xtype: 'chart',
			theme: "OUS",
            animate: true,
            shadow: true,
            store: store,
            legend: false,
            axes: [{
                type: 'Numeric',
                position: 'bottom',
				hidden: true,
                fields: ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'],
                title: false,
                grid: false,
            }, {
                type: 'Category',
				grid: "horizontal",
                position: 'left',
                fields: ['label'],
                title: false
            }],
            series: [{
                type: 'bar',
                axis: 'bottom',
                gutter: 80,
                xField: 'label',
                yField: ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'],
                stacked: true,
                tips: {
                    trackMouse: true,
                    width: 100,
                    height: 40,
                    renderer: function(storeItem, item) {
						this.setTitle(getChartTooltipLabel(storeItem, item));
                    }
                },
				label: {
					display: 'middle',
					field: ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'],
					renderer: function(v) {
						return v + '%';
					},
					orientation: 'horizontal',
					color: '#fff',
					'text-anchor': 'middle'
				}
            }]
        });




    var panel1 = Ext.create('widget.panel', {
        width: 800,
        height: 400,
        title: 'Resultater for enhet tidsperiode',
        renderTo: "chartTarget",
        layout: 'fit',
        items: chart
    });
});




/**
 * Gets the chart tooltip label.
 */
function getChartTooltipLabel(storeItem, item) {
	if (storeItem.get("a1") == item.value[1]) {
		return "Ikke i det hele tatt";
	}
	if (storeItem.get("a2") == item.value[1]) {
		return "I liten grad";
	}
	if (storeItem.get("a3") == item.value[1]) {
		return "I noen grad";
	}
	if (storeItem.get("a4") == item.value[1]) {
		return "I stor grad";
	}
	if (storeItem.get("a5") == item.value[1]) {
		return "I svært stor grad";
	}
	if (storeItem.get("a6") == item.value[1]) {
		return "Ikke aktuelt";
	}
}

Debugging already done:
none


Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Windows 7

[mvoss]

Hi,

I have another problem with this. If one bar is not big enough for the label, the label is shown over the next one. If the next one is not big enough for the labels they are shown over the third bar... If the bar is not big enough there should not be any label. Have a look at the bottom most bar. The first two labels are shown on top of each other in the third of the stacked series. This is the the code from the original post.

stackedBarchart.PNG

Regards,
Markus