Flex Examples

The following example shows how you can change the barWidthRatio style to control how wide each bar is in relation to the category width.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/15/changing-the-bar-width-ratio-on-a-flex-bar-chart/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
                <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
                <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
                <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
                <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="barWidthRatio:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="0.6"
                        liveDragging="true"
                        tickInterval="0.1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

     <mx:BarChart id="barChart"
             showDataTips="true"
             dataProvider="{arrColl}"
             width="100%"
             height="100%">
        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="name"/>
        </mx:verticalAxis>
        <mx:series>
            <mx:BarSeries id="barSeries"
                    yField="name"
                    xField="avg"
                    displayName="avg"
                    barWidthRatio="{slider.value}" />
        </mx:series>
    </mx:BarChart>

</mx:Application>

View source is enabled in the following example.