Use SolidColorStoke to paint verticalStroke : Column Chart Style « Chart « Flex






Use SolidColorStoke to paint verticalStroke

Use SolidColorStoke to paint verticalStroke
               
<?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:backgroundElements>
        <mx:GridLines horizontalChangeCount="1" verticalChangeCount="1" >
          <mx:horizontalStroke>
            <mx:SolidColorStroke weight="1" alpha=".75"/>
          </mx:horizontalStroke>
          <mx:verticalStroke>
            <mx:SolidColorStroke weight="1" alpha=".75"/>
          </mx:verticalStroke>
          <mx:horizontalFill>
            <mx:SolidColor color="#000000" alpha=".5"/>
          </mx:horizontalFill>
        </mx:GridLines>
      </mx:backgroundElements>
      <mx:verticalAxis>
        <mx:LinearAxis title="Quantity" />
      </mx:verticalAxis>
      <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 GradientColumnChart with Color Gradient
2.Use SolidColorStoke to paint horizontalStrokeUse SolidColorStoke to paint horizontalStroke
3.Set fill colorSet fill color
4.background Elements for ColumnChartbackground Elements for ColumnChart
5.Remove Shadows for ColumnChartRemove Shadows for ColumnChart
6.Fill column with LinearGradientFill column with LinearGradient
7.Use GridLines as backgroundUse GridLines as background
8.LinearGradient fillLinearGradient fill
9.Formatting grid lines with ActionScriptFormatting grid lines with ActionScript
10.Formatting grid lines with MXMLFormatting grid lines with MXML
11.Chart With StyleChart With Style
12.Apply a custom drop shadow filter to a ColumnChart controlApply a custom drop shadow filter to a ColumnChart control
13.Creates a floating ColumnChart controlCreates a floating ColumnChart control
14.Alternatively, you can set the gutter properties inlineAlternatively, you can set the gutter properties inline
15.Define a custom component inline by using the tag.Define a custom component inline by using the <fx:Component> tag.
16.specify the x, y, height, and width properties of a rectangular range.specify the x, y, height, and width properties of a rectangular range.
17.Add background to chartAdd background to chart
18.Add new grid lines as annotation elements to the chart and an image as the background element.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 propertiessAdd an image to the chart and manipulate its propertiess
20.Style tickStrokeStyle tickStroke
21.Style minorTickStrokeStyle minorTickStroke
22.Disabling axis labelsDisabling axis labels
23.Change the label alignment for the vertical and horizontal axes.Change the label alignment for the vertical and horizontal axes.