2 Replies Latest reply on Oct 5, 2009 12:14 PM by Steve_Porter

    chartSeriesStyles -  unexpected behavior with AreaChart.

    Steve_Porter Level 1

      Hello,

       

      I am trying to work with chartSeriesStyles - specifically applying it to an AreaChart.

       

      The chartSeriesStyles works like a champ with things like a ColumnChart - but the AreaChart seems to have a bug (the stacked areas are all black).AreaChart with chartSeriesStyle.jpg

       

      Below is the code - just comment out the AreaChart to see the graph in default colors.

      like....

           <!--
           AreaChart {
              chartSeriesStyles: PCCSeries1, PCCSeries2;
           }
           -->

       

      ...you'll see something like:  (you'll see the stacked area chart is working - just no style/custom colors).

      AreaChart with chartSeriesStyle default.jpg

       

       

      Has anybody else seen this anomoly - or am I missing a step?

       

      -thanks,

      sporter

       

       

       

      <?xml version="1.0"?>
      <!-- charts/SeriesStyles.mxml -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" >

       

        <!--
        <
        <  Comment/Remove the "AreaChart" in the following style and you'll see the default
        <  colors for the AreaChart - With the style enabled, One would expect the AreaChart
        <  to have similar overriden colors like the ColumnChart - but instead we are getting
        <  the unexpected color(s) of black
        <
        -->
        <mx:Style>
           ColumnChart {
              chartSeriesStyles: PCCSeries1, PCCSeries2;
           }
          
           AreaChart {
              chartSeriesStyles: PCCSeries1, PCCSeries2;

           }

          
           .PCCSeries1 {
              fill: #880C1B;
           }
           .PCCSeries2 {
              fill: #66735B;
           }
          
        </mx:Style>

       

        <mx:Script>
        import mx.collections.ArrayCollection;
        [Bindable]
        public var expenses:ArrayCollection = new ArrayCollection([
           {Month: "Jan", Profit: 2000, Expenses: 1500},
           {Month: "Feb", Profit: 1000, Expenses: 200},
           {Month: "Mar", Profit: 1500, Expenses: 500}
        ]);
        </mx:Script>

       

          <mx:Panel title="Setting Styles on Series">
              <mx:ColumnChart id="column"
                  dataProvider="{expenses}"
                  showDataTips="true"
              >
                  <mx:horizontalAxis>
                      <mx:CategoryAxis
                          dataProvider="{expenses}"
                          categoryField="Month"
                      />
                  </mx:horizontalAxis>
                  <mx:series>
                      <mx:ColumnSeries
                          xField="Month"
                          yField="Profit"
                          displayName="Profit"
                      />
                      <mx:ColumnSeries
                          xField="Month"
                          yField="Expenses"
                          displayName="Expenses"
                      />
                  </mx:series>
              </mx:ColumnChart>
              <mx:Legend dataProvider="{column}"/>
          </mx:Panel>
       
          <mx:Panel title="Setting Styles on Series also">
              <mx:AreaChart id="area"
                  dataProvider="{expenses}"
                  showDataTips="true"
                  type="stacked"
               >
                  <mx:horizontalAxis>
                     <mx:CategoryAxis
                             dataProvider="{expenses}"
                          categoryField="Month"
                     />
                  </mx:horizontalAxis>
                 
                     <mx:series>
                     <mx:AreaSeries
                          yField="Profit"
                          displayName="Profit"
                     />
                     <mx:AreaSeries
                          yField="Expenses"
                          displayName="Expenses"
                     />
                  </mx:series>
                 
              </mx:AreaChart>
              <mx:Legend dataProvider="{area}"/>
          </mx:Panel>

       

      </mx:Application>