0

This task doesn't seem too tough, but it has been blocking me for the last couple hours. I am doing a stacked bar chart, and I want the labels to be horizontally and vertically centered within each Bar Segment. The labels are set to be "inside". Such, you can easily center the label horizontally by setting label-align:middle, but there doesn't seem to be anything that can handle the vertical aspect.

Next approach was to create a custom component of the Bar Chart, but that go extremely messy when I was messing with the rendering functions. I thought it would be just modifying this line: v.labelY=v.y + barSeries.seriesRenderData.renderedYOffset - barSeries.seriesRenderData.renderedHalfWidth; but it hasn't worked.

Anyways, if anyone has any ideas how to do this, it would be greatly appreciated.
Attached is what the bar chart looks like now. And just to clarify, I would like these labels(manual in the picture) to be vertically centered.

Demo

mbseid
  • 1,044
  • 10
  • 18
  • I have a very dirty hack that I am using now that I would rather not use. I set a labelFunction and got access to the BarSeries, then changed the y value of the labelContainer. I haven't found any height or anything to make this a dynamic value, so right now it is hardcoded. – mbseid Mar 15 '11 at 21:26
  • `private function labelFunction (element:ChartItem, series:Series): String { var data:BarSeriesItem = BarSeriesItem(element); var currentSeries:BarSeries = BarSeries(series); //This needs to be updated. No absolue value can be here currentSeries.labelContainer.y = 35; return "" + data.item.label; } ` – mbseid Mar 15 '11 at 21:27

2 Answers2

2
    <mx:BarSeries 
                        xField="s1"
                        yField="name"
                        displayName="Employees in shceme"
                        labelAlign="center"
                        labelPosition="inside"
                        styleName="labelStyle"
                        />

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        .labelStyle {
            verticalAlign:middle;
        }
     </fx:Style>

Enjoy!!!
Sachin Chandorkar
  • 264
  • 3
  • 8
0

Set the verticalCenter property of the columnSeries to 0.

Angelo
  • 1,578
  • 3
  • 20
  • 39
  • I am using a BarSeries and setting verticalCenter doesn't affect anything. Thanks for the attempt. Still bashing my head over this. – mbseid Mar 15 '11 at 20:55
  • But you are displaying the charts in a column fashion? Try setting horizontalCenter to 0 as well.. You could also play around with the textAlign property and set it to center as well. – Angelo Mar 16 '11 at 14:02