background Elements for ColumnChart

             
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    
        import mx.controls.Alert;

        import mx.collections.ArrayCollection;

        [Bindable]
        private var productSales:ArrayCollection = new ArrayCollection( [
            { Quarter: "1", PC: 10000, Mac: 3000, Gadgets: 1000, Total: 14000 },
            { Quarter: "2", PC: 12000, Mac: 4000, Gadgets: 2000, Total: 18000 },
            { Quarter: "3", PC: 15000, Mac: 8000, Gadgets: 5000, Total: 28000 },
            { Quarter: "4", PC: 20000, Mac: 10000, Gadgets: 9000, Total: 39000 }
            ]);
 
        
        public function setAxisLabel(labelValue:Object,previousLabelValue:Object,axis:CategoryAxis, labelItem:Object):String {
          return "Label: " + labelValue;
        }

      
  </mx:Script>
  <mx:Panel title="ColumnChart Example" width="100%" height="100%">
    <mx:ColumnChart id="columnChart" height="100%" width="100%"
      showDataTips="true" dataProvider="{productSales}">
      <mx:verticalAxis>
        <mx:LinearAxis title="Quantity" />
      </mx:verticalAxis>

      <mx:backgroundElements>
        <mx:GridLines horizontalChangeCount="1" verticalChangeCount="1">
          <mx:horizontalStroke>
            <mx:Stroke weight="1" />
          </mx:horizontalStroke>
          <mx:verticalStroke>
            <mx:Stroke weight="1" />
          </mx:verticalStroke>
          <mx:horizontalFill>
            <mx:SolidColor color="0xCCCCCC"/>
          </mx:horizontalFill>
        </mx:GridLines>
      </mx:backgroundElements>

      <mx:horizontalAxisRenderer>
        <mx:AxisRenderer>
          <mx:axisStroke>
            <mx:Stroke color="#000000" weight="3" alpha=".75" />
          </mx:axisStroke>
        </mx:AxisRenderer>
      </mx:horizontalAxisRenderer>

      <mx:verticalAxisRenderer>
        <mx:AxisRenderer>
          <mx:axisStroke>
            <mx:Stroke color="#000000" weight="3" alpha=".75" />
          </mx:axisStroke>
          <mx:tickStroke>
            <mx:Stroke color="#CCCCCC" weight="1" />
          </mx:tickStroke>
          <mx:minorTickStroke>
            <mx:Stroke color="#CCCCCC" weight="1" />
          </mx:minorTickStroke>
        </mx:AxisRenderer>
      </mx:verticalAxisRenderer>


      <mx:horizontalAxis>
        <mx:CategoryAxis dataProvider="{productSales}"
          categoryField="Quarter" labelFunction="setAxisLabel"
          title="Fiscal Year" displayName="Quarter" />
      </mx:horizontalAxis>

      <mx:series>
        <mx:ColumnSeries xField="Quarter" yField="PC" displayName="PC" />
        <mx:ColumnSeries xField="Quarter" yField="Mac" displayName="Mac" />
        <mx:ColumnSeries xField="Quarter" yField="Gadgets" displayName="Gadgets" />
      </mx:series>
    </mx:ColumnChart>

    <mx:Legend dataProvider="{columnChart}" direction="horizontal" />

  </mx:Panel>
</mx:Application>

Related examples in the same category

1.	ColumnChart with Color Gradient
2.	Use SolidColorStoke to paint horizontalStroke
3.	Use SolidColorStoke to paint verticalStroke
4.	Set fill color
5.	Remove Shadows for ColumnChart
6.	Fill column with LinearGradient
7.	Use GridLines as background
8.	LinearGradient fill
9.	Formatting grid lines with ActionScript
10.	Formatting grid lines with MXML
11.	Chart With Style
12.	Apply a custom drop shadow filter to a ColumnChart control
13.	Creates a floating ColumnChart control
14.	Alternatively, you can set the gutter properties inline
15.	Define a custom component inline by using the tag.
16.	specify the x, y, height, and width properties of a rectangular range.
17.	Add background to chart
18.	Add new grid lines as annotation elements to the chart and an image as the background element.
19.	Add an image to the chart and manipulate its propertiess
20.	Style tickStroke
21.	Style minorTickStroke
22.	Disabling axis labels
23.	Change the label alignment for the vertical and horizontal axes.

background Elements for ColumnChart : Column Chart Style « Chart « Flex

Related examples in the same category