Stacked bar chart with series label to the right outside of the bar

[gordonk66]

hello,
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:
29972

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

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

[mitchellsimoens]

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.

[gordonk66]

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?

[sai571]

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',
xField:'scenarioName',
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

[Mark.B]

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')
}
}],




36685

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!

-Mark