LineChart with two X-axis

Question

Hello!
How can I implement the LineChart component to have two X-axis like in the screenshot attached?
Note: The Y axis is the same for both line charts, not inverted or anything.
Thank you!

Answer 1

here is a code where it shows 2 y axis just alter this to x axis and do the needful
<?xml version="1.0"?>
<!-- charts/MultipleAxes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx: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},
  ]]></mx:Script> 
  <mx:Panel title="Column Chart With Multiple Axes">
     <mx:ColumnChart id="myChart" showDataTips="true">
        <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"
                horizontalAxis="{h1}"
                dataProvider="{SMITH}"
                yField="close"
                displayName="SMITH"
            >
                <mx:verticalAxis>
                   <mx:LinearAxis id="v1" minimum="40" maximum="50"/>
                </mx:verticalAxis>          
           </mx:ColumnSeries>          
           <mx:LineSeries id="cs2"
                horizontalAxis="{h1}"
                dataProvider="{DECKER}"
                yField="close"
                displayName="DECKER"
            >
                <mx:verticalAxis>
                    <mx:LinearAxis id="v2" minimum="150" maximum="170"/>          
                </mx:verticalAxis>
           </mx:LineSeries>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>