Question

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

Was it helpful?

Solution

    <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!!!

OTHER TIPS

Set the verticalCenter property of the columnSeries to 0.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top