<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"

minWidth="955" minHeight="600">

<fx:Declarations>

<s:SolidColor id="s1" color="#990000" alpha=".5"/>

<s:SolidColor id="s2" color="#808080" alpha=".5"/>

<s:SolidColor id="s3" color="#cc00cc" alpha=".5"/>

<s:SolidColorStroke id="scs1" color="#990000" weight="2"/>

<s:SolidColorStroke id="scs2" color="#808080" weight="2"/>

<s:SolidColorStroke id="scs3" color="#cc00cc" weight="2"/>

<mx:SolidColorStroke color="0x990000" weight="2" id="axis1"/>

<mx:SolidColorStroke color="red" weight="5" id="axis2"/>

<mx:SolidColorStroke color="0xFF0000" weight="1" id="ticks1"/>

<mx:SolidColorStroke color="0x0000FF" weight="1" id="mticks1"/>

</fx:Declarations>

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

@namespace chartClasses "mx.charts.chartClasses.*";

mx|ColumnChart{

font-family: "verdana";

font-weight: bold;

axis-title-style-name:axistitle;

mx|Legend{

label-placement:right;

marker-height:20;

marker-width:20;

background-color:#000000;

mx|LegendItem{

font-family: verdana;

font-size:12px;

color: #FFFFFF;

font-weight:bold;

font-style:normal;

font-anti-alias-type:advanced;

chartClasses|DataTip {

font-Family: "Verdana";

font-Size: 12px;

color: #FFFFFF;

background-color: #000000;

font-style:normal;

leading: 0;

text-align:center;

.hstyle{

color: #990000;

.vstyle{

color: red;

tick-placement:none;

.axistitle{

font-size:15px;

color: blue;

</fx:Style>

<fx:Script>

import mx.collections.ArrayCollection;

[Bindable]

public var student:ArrayCollection = new ArrayCollection([

{Stream: "Management", Girls:1000, Boys:1400, TotalStudent:2400},

{Stream: "Computer Science", Girls:800, Boys:1200, TotalStudent:2000},

{Stream: "Mechanical", Girls:200, Boys:1500, TotalStudent:1700},

{Stream: "Electical", Girls:800, Boys:850, TotalStudent:1650},

{Stream: "Electronics", Girls:500, Boys:1000, TotalStudent:1500},

{Stream: "Civil", Girls:300, Boys:900, TotalStudent:1200}

</fx:Script>

<s:Panel title="Chart Style Example" width="713" height="521">

<s:layout>

<s:VerticalLayout horizontalAlign="center"/>

</s:layout>

<mx:ColumnChart id="cchart"

dataProvider="{student}"

showDataTips="true"

width="708"

dataTipMode="multiple"

mouseSensitivity="50">

<mx:horizontalAxisRenderers>

<mx:AxisRenderer axis="{c1}"

styleName="hstyle"

axisStroke="{axis1}"

placement="bottom"

minorTickPlacement="inside"

minorTickLength="2"

tickLength="5"

tickPlacement="inside">

<mx:tickStroke>{ticks1}</mx:tickStroke>

<mx:minorTickStroke>{mticks1}</mx:minorTickStroke>

</mx:AxisRenderer>

</mx:horizontalAxisRenderers>

<mx:verticalAxisRenderers>

<mx:AxisRenderer axis="{l1}"

styleName="vstyle"

axisStroke="{axis2}"/>

</mx:verticalAxisRenderers>

<mx:verticalAxis>

<mx:LinearAxis id="l1"

title="--Number of Students--" />

</mx:verticalAxis>

<mx:horizontalAxis>

<mx:CategoryAxis id="c1"

dataProvider="{student}"

categoryField="Stream"

title="--Stream--"/>

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries id="cs1"

xField="Stream"

yField="Girls"

displayName="Girls"

fill="{s1}"

stroke="{scs1}" selectable="true"/>

<mx:ColumnSeries id="cs2"

xField="Stream"

yField="Boys"

displayName="Boys"

fill="{s2}"

stroke="{scs2}"/>

<mx:ColumnSeries id="cs3"

xField="Stream"

yField="TotalStudent"

displayName="TotalStudent"

fill="{s3}"

stroke="{scs3}"/>

</mx:series>

<mx:backgroundElements>

<mx:Image

source="@Embed('C:/work/bikrant/flex4component/chartstyle/roseindia.png')"

alpha=".3"/>

</mx:backgroundElements>

</mx:ColumnChart>

<mx:HBox paddingBottom="5"

paddingLeft="5"

paddingRight="5"

paddingTop="5"

verticalAlign="middle"

horizontalAlign="center"

cornerRadius="20"

backgroundColor="#000000">

<mx:Legend dataProvider="{cchart}"

direction="horizontal"

cornerRadius="20"

height="31"

width="300" x="18"/>

</mx:HBox>

</s:Panel>