<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="s3" color="#cc00cc" alpha=".3"/>

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

</fx:Declarations>

<fx:Style>

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

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

mx|Legend{

label-placement:right;

marker-height:30;

marker-width:30;

background-color:#000000;

mx|LegendItem{

font-family: verdana;

font-size:12px;

color: #FFFFFF;

font-weight:bold;

</fx:Style>

<fx:Script>

import mx.collections.ArrayCollection;

import mx.core.BitmapAsset;

[Bindable]

[Embed(source="C:/work/bikrant/flex4component/skinningchartitem/girlstud.jpg")]

public var gitlStudent:Class;

[Bindable]

[Embed(source="C:/work/bikrant/flex4component/skinningchartitem/students.gif")]

public var boyStudent:Class;

[Bindable]

public var gitlStudentFactory:ClassFactory = new ClassFactory(gitlStudent);

[Bindable]

public var boyStudentFactory:ClassFactory = new ClassFactory(boyStudent);

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

Skinning Data item in Chart Example" width="546" height="564">

<s:layout>

<s:VerticalLayout horizontalAlign="center"/>

</s:layout>

<mx:PlotChart id="pchart"

dataProvider="{student}"

showDataTips="true"

fontFamily="verdana"

width="537" height="445">

<mx:series>

<mx:PlotSeries id="ps1"

xField="Boys"

yField="Girls"

displayName="Boys/Girls"

itemRenderer="{gitlStudentFactory}"

legendMarkerRenderer="{gitlStudentFactory}"

radius="20"/>

<mx:PlotSeries id="ps2"

xField="TotalStudent"

yField="Boys"

displayName="TotalStudent/Boys"

itemRenderer="{boyStudentFactory}"

legendMarkerRenderer="{boyStudentFactory}"

radius="20"/>

<mx:PlotSeries id="ps3"

xField="TotalStudent"

yField="Girls"

displayName="TotalStudent/Girls"

fill="{s3}"

stroke="{scs3}"

itemRenderer="mx.charts.renderers.TriangleItemRenderer"

radius="10"/>

</mx:series>

</mx:PlotChart>

<mx:Legend dataProvider="{pchart}" direction="horizontal" cornerRadius="20"/>

</s:Panel>