View Full Version : Stacked bar chart with series label to the right outside of the bar

13 Dec 2011, 9:23 AM
I'm wanting to have the labels for a bar chart series appear to the right of stacked bars that all add up to the same value. So here is what my chart looks like:

I'd like the series labels to be to the right of the stacked bars...something like :

Here is the series config I'm using:

series: [
type: 'bar',
axis: 'bottom',
highlight: false,
gutter: 40,
yPadding: 20,
stacked: true,
label: {
display: 'outside',
field: 'used',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
font: '14px news-gothic-std,sans-serif',
fill: '#666666'
'text-anchor': 'middle'
xField: 'email',
yField: ['used', 'unused']

If this is currently not possible that'd be good info.

13 Dec 2011, 9:39 AM
With a stacked bar chart... I wouldn't think it would work. If it did, the value for each bar would show to the right of the end of the bar which would look like it's inside the other bar so can be misconstrued.

13 Dec 2011, 1:30 PM
Using the stacked bar was just my way around filling in the empty space to the right of every bar. Is there a better way to do that then adding the second values to backfill?

14 Feb 2012, 7:58 AM
I'm having issues in positioning the labels in the Stacked column chart.

The following code has the details, If I don't give "gutter" and "width" it's working. But it looks like these bar related configs are not working well with Labels on the columns.

type: 'column',
axis: 'left',
yField: ['netValue','totalCost','totalTax'],
stacked: true,
title : ['Net Value','Total Cost','Total Tax'],
label: {
display: 'inside',
field: ['netValue','totalCost','totalTax'],
renderer: millionsRenderer,
orientation: 'horizontal',
font: '12px news-gothic-std,sans-serif',
minMargin: 500,
fill: '#000000',
'text-anchor': 'middle'
xPadding:80,barWidth: 30,
style : {
width: 30
gutter: -80

1 Jul 2012, 12:37 AM
Was anyone able to find a solution to this? I'm having trouble getting the label to render at the top of the stack.

Here's my series code:

series: [{
type: 'column',
axis: 'left',
xField: 'date',
yField: ['data1','data2','data3','data4','data5','data6','data7'],
stacked: true,
label: {
display: 'outside',
'text-anchor': 'middle',
field: ['totaldata'],
renderer: Ext.util.Format.numberRenderer('0,000')


If it isn't possible to do this, would it be possible to label each data in each column UNLESS the value is 0?

Thanks in advance!