Flex Chart, columnWidthRatio not working on LinearAxis of ColumnChart

1k views Asked by At

Columns of columnChart are showing too narrow if i am using the LinearAxis, even tried columnWidthRatio = 0.95

for category axis, this is fine Could anyone tell me what i am doing wrong here?

I just want to increse the width of column on this chart.

Sample to reproduce the problem:

    <mx:Script>
        <![CDATA[
            import mx.charts.chartClasses.IAxis;

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return numberFormatter.format(item);
            }
        ]]>
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter" precision="3" />

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object temp="10" count="500" />
                <mx:Object temp="30" count="300"  />
                <mx:Object temp="40" count="100"  />
                <mx:Object temp="70" count="700"  />
                <mx:Object temp="80" count="200"  />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="columnWidthRatio:" />
        <mx:HSlider id="slider"
                    minimum="0.1"
                    maximum="0.9"
                    value="0.1"
                    liveDragging="true"
                    snapInterval="0.1"
                    tickInterval="0.1" />
    </mx:ApplicationControlBar>

    <mx:ColumnChart id="columnChart"
                    showDataTips="true"
                    dataProvider="{arrColl}"
                    columnWidthRatio="{slider.value}"
                    width="100%"
                    height="100%">

        <mx:horizontalAxis>
            <mx:LinearAxis baseAtZero="false"
                           minimum="0"
                           maximum="100"
                           interval="20"
                           minorInterval="10"
                           labelFunction="linearAxis_labelFunc" />
        </mx:horizontalAxis>

        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false"
                           minimum="100"
                           maximum="1000"
                           labelFunction="linearAxis_labelFunc" />
        </mx:verticalAxis>


        <mx:series>
            <mx:ColumnSeries id="columnSeries"
                             xField="temp"
                             yField="count"
                             displayName="temp" />
        </mx:series>

        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>

    </mx:ColumnChart>

</mx:Application>
1

There are 1 answers

1
Lalit On BEST ANSWER

done myself, using Item Renderer

public class ProcessItemRenderer extends UIComponent implements IDataRenderer