Question

Based on this Adobe multiple axis chart example: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_12.html

Then I changed some data values to negative and my axis became not aligned anymore.

Does anyone know how to align vertical axis? Is this another Adobe bug or there is some property that aligns axis? Thanks

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    minHeight="600"
    minWidth="955"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable] public var SMITH:ArrayCollection = new ArrayCollection([{date:"22-Aug-05", close:41.87},
                                                                               {date:"23-Aug-05", close:-45.74},
                                                                               {date:"24-Aug-05", close:-42.77},
                                                                               {date:"25-Aug-05", close:48.06},]);

            [Bindable] public var DECKER:ArrayCollection = new ArrayCollection([{date:"22-Aug-05", close:157.59},
                                                                                {date:"23-Aug-05", close:-160.3},
                                                                                {date:"24-Aug-05", close:-150.71},
                                                                                {date:"25-Aug-05", close:156.88},]);
        ]]>
    </fx:Script>

    <mx:Panel title="Column Chart With Multiple Axes">
        <mx:ColumnChart id="myChart"
            showDataTips="true"
            type="overlaid">
            <mx:horizontalAxis>
                <mx:CategoryAxis id="h1"
                    categoryField="date"/>
            </mx:horizontalAxis>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer placement="bottom"
                    axis="{h1}"/>
            </mx:horizontalAxisRenderers>

            <mx:verticalAxisRenderers>
                <mx:AxisRenderer placement="left"
                    axis="{v1}"/>
                <mx:AxisRenderer placement="left"
                    axis="{v2}"/>
            </mx:verticalAxisRenderers>

            <mx:series>
                <mx:ColumnSeries id="cs1"
                    dataProvider="{SMITH}"
                    horizontalAxis="{h1}"
                    yField="close"
                    displayName="SMITH">
                    <mx:verticalAxis>
                        <mx:LinearAxis id="v1"/>
                    </mx:verticalAxis>
                </mx:ColumnSeries>
                <mx:LineSeries id="cs2"
                    dataProvider="{DECKER}"
                    horizontalAxis="{h1}"
                    yField="close"
                    displayName="DECKER">
                    <mx:verticalAxis>
                        <mx:LinearAxis id="v2"/>
                    </mx:verticalAxis>
                </mx:LineSeries>
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</s:Application>

Answer 1

You can use minimum and maximum properties of Linear axis.

Modified example(edited):

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    minHeight="600"
    minWidth="955"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable] public var SMITH:ArrayCollection = new ArrayCollection([{date:"22-Aug-05", close:41.87},
                {date:"23-Aug-05", close:-45.74},
                {date:"24-Aug-05", close:-42.77},
                {date:"25-Aug-05", close:48.06},]);

            [Bindable] public var DECKER:ArrayCollection = new ArrayCollection([{date:"22-Aug-05", close:157.59},
                {date:"23-Aug-05", close:-160.3},
                {date:"24-Aug-05", close:-150.71},
                {date:"25-Aug-05", close:156.88},]);
        ]]>
    </fx:Script>

    <mx:Panel title="Column Chart With Multiple Axes">
        <mx:ColumnChart id="myChart"
                        showDataTips="true"
                        type="overlaid"
                        >

            <mx:horizontalAxis>
                <mx:CategoryAxis id="h1"
                                 categoryField="date"/>
            </mx:horizontalAxis>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer placement="bottom"
                                 axis="{h1}"/>
            </mx:horizontalAxisRenderers>

            <mx:verticalAxis>
                <mx:LinearAxis id="v1" minimum="-50" maximum="50" autoAdjust="false"/>
            </mx:verticalAxis>          

            <mx:verticalAxisRenderers>
                <mx:AxisRenderer placement="left"
                                 axis="{v1}"/>
                <mx:AxisRenderer placement="left"
                                 axis="{v2}"/>
            </mx:verticalAxisRenderers>

            <mx:series>
                <mx:ColumnSeries id="cs1"
                                 dataProvider="{SMITH}"
                                 horizontalAxis="{h1}"
                                 yField="close"
                                 displayName="SMITH"
                                 >
                </mx:ColumnSeries>
                <mx:LineSeries id="cs2"
                               dataProvider="{DECKER}"
                               horizontalAxis="{h1}"
                               yField="close"
                               displayName="DECKER"
                               >
                    <mx:verticalAxis >
                        <mx:LinearAxis id="v2" minimum="-180" maximum="180" autoAdjust="false"/>
                    </mx:verticalAxis>
                </mx:LineSeries>
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</s:Application>

Note, that I moved verticalAxis for the first series of data to the ColumnChart tag. I was playing around with the origin line placement issue. Then it striked me, that ColumnChart has defualt vertical axis and it seems, that it’s maximum and minimum values are computed based on the first series of data. Computed Maximum and Minimum were not overriden by the minimum and maximum properties for default chart vertical axis. This caused wrong origin line placement.

I guess in real world you’ll get data dynamically. In this case you’ll have to calculate minimums and maximums on-the-fly.