2 Vertical Axis Chart & State Change Bug - Clarified

Question

When a column or line chart has 2 vertical axis (one on the left and one on the right), the additional vertical axis must be defined at the series level as the definition at the chart level only allows for one vertical axis.
When you define the additional vertical axis at the series level, it will populate on the chart when the chart is first rendered.  But, it fails to populate after a state change.   This is apparently due to the fact that the “maximum” property on the additional vertical axis defined at the series level changes to 100 causing the line not to render as the data values are greater than 100.
This is a Flex 4 problem.  Flex 3 does not have this problem.
Below is an example application that demonstrates the problem.
The example first presents a chart with Gross Sales plotted as columns using the left axis and Net Sales plotted as a line using the right axis.  Note, the vertical axis for Net Sales is defined at the series level.
When you click the “Data” button a state change occurs and a data grid is presented showing Gross Sales and Net Sales.  When you click the “Chart” button another state change occurs and the chart is presented again.  Gross Sales will still populate, but Net Sales fails to populate.  This is the problem.
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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 dp:ArrayCollection = new ArrayCollection([
        {DTSALE:"11-Nov-07", NET:141.87, GROSS:63.34},
        {DTSALE:"12-Nov-07", NET:145.74, GROSS:58.56},
        {DTSALE:"13-Nov-07", NET:142.77, GROSS:62.34},
        {DTSALE:"14-Nov-07", NET:148.06, GROSS:75.65},
    ]]>
  </fx:Script>
  <s:states>
    <s:State name="chart"/>
    <s:State name="data"/>
  </s:states>
  <s:controlBarContent>
    <s:Button label="Chart" click="this.currentState='chart'"/>
    <s:Button label="Data" click="this.currentState='data'"/>
  </s:controlBarContent>
  <s:Group width="100%" height="100%">
    <mx:ColumnChart includeIn="chart"
      width="100%" height="100%" dataProvider="{dp}">
      <mx:horizontalAxis>
        <mx:CategoryAxis categoryField="DTSALE"/>
      </mx:horizontalAxis>
      <mx:verticalAxis>
        <mx:LinearAxis id="vLeft" title="Gross Sales Columns"/>
      </mx:verticalAxis>
      <mx:series>
        <mx:ColumnSeries yField="GROSS" verticalAxis="{vLeft}"/>
        <mx:LineSeries yField="NET">
          <mx:verticalAxis>
            <!-- Workaround: add maximum="200" to line below -->
            <mx:LinearAxis id="vRight" title="Net Sales Line"/>
          </mx:verticalAxis>
        </mx:LineSeries>
      </mx:series>
      <mx:verticalAxisRenderers>
        <mx:AxisRenderer axis="{vLeft}" placement="left"/>
        <mx:AxisRenderer axis="{vRight}" placement="right"/>
      </mx:verticalAxisRenderers>
    </mx:ColumnChart>
    <mx:DataGrid dataProvider="{dp}" width="100%" height="100%" includeIn="data">
      <mx:columns>
        <mx:DataGridColumn dataField="DTSALE"/>
        <mx:DataGridColumn dataField="NET"/>
        <mx:DataGridColumn dataField="GROSS"/>       
      </mx:columns>
    </mx:DataGrid>
  </s:Group>
</s:Application>

Answer 1

I found a workaround.
When the chart goes through a state change, the “maximum” property on the additional vertical axis defined at the series level defaults to 100 causing the line not to render as the data values are greater than 100.  Setting this to a higher value (maximum="10000" ) forces the line to appear consistently after a state change.
I still believe this is a bug.
The downside is that I will have to dynamically determine the maximum value to use at runtime, but at least I can still use state changes on two vertical axis charts.