Bar Chart Bar Width

Question

I am strugllig hard to have all my bars have a same width. Followig is what the code looks like:
<?xml version="1.0"?>
<!-- charts/UsingBarSets.mxml -->
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    >
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script><![CDATA[
        import mx.charts.Legend;
        import mx.charts.BarChart;
        import mx.charts.series.BarSet;
        import mx.charts.series.BarSeries;
        import mx.collections.ArrayCollection;
        [Bindable]
        private var yearlyData:ArrayCollection = new ArrayCollection([
            {month:"January", label:"January", planned:5000, funded:5000,
                spent:4000},
            {month:"February", label:"February", planned:7000, funded:6000,
                spent:7000},
            {month:"March", label:"March", planned:8000, funded:7000,
                spent:6000},
            {month:"April", label:"April",planned:10000, funded:1000,
                spent:12000}
        [Bindable]
        private var yearlyData1:ArrayCollection = new ArrayCollection([
            {month:"January", revenue:120, costs:45,
                overhead:102, oneTime:23},
            {month:"February", revenue:108, costs:42,
                overhead:87, oneTime:47},
            {month:"March", revenue:150, costs:82,
                overhead:32, oneTime:21},
            {month:"April", revenue:170, costs:44,
                overhead:68},
            {month:"May", revenue:250, costs:57,
                overhead:77, oneTime:17},
            {month:"June", revenue:200, costs:33,
                overhead:51, oneTime:30},
            {month:"July", revenue:145, costs:80,
                overhead:62, oneTime:18},
            {month:"August", revenue:166, costs:87,
                overhead:48},
            {month:"September", revenue:103, costs:56,
                overhead:42},
            {month:"October", revenue:140, costs:91,
                overhead:45, oneTime:60},
            {month:"November", revenue:100, costs:42,
                overhead:33, oneTime:67},
            {month:"December", revenue:182, costs:56,
                overhead:25, oneTime:48},
            {month:"May", revenue:120, costs:57,
                overhead:30}
    ]]></fx:Script>
        <mx:BarChart id="myChart"
                     dataProvider="{yearlyData}" showDataTips="true"  width="100%" height="100%" >
            <mx:verticalAxis>
                <mx:CategoryAxis categoryField="month"/>
            </mx:verticalAxis>
            <mx:series>
                <mx:BarSet type="clustered" >
                    <mx:BarSeries xField="planned"
                                  displayName="Planned" />
                    <mx:BarSet type="overlaid">
                        <mx:BarSeries
                            xField="funded"
                               displayName="Funded"/>
                        <mx:BarSeries
                            xField="spent"
                            displayName="Spent"/>
                    </mx:BarSet>
                </mx:BarSet>
            </mx:series>
        </mx:BarChart>
</s:Application>

Answer 1

Take a look at the Bar Chart's barWidthRatio and maxBarWidth styles. They interact with one another,so are a little unpredictable.
One tactic I use in the case where the bar widths are critical to the design is to set up two horizontal slider and bind the barWidthRatio and maxBarWidth properties to them. Now you can adjust them at run time and watch how they interact, and pick up the most appropriate values to use. Makes it much easier.