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

</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;

[Bindable]

public var student:ArrayCollection = new ArrayCollection([

{"Stream":"Management", "Girls":1000, "r":10 },

{"Stream":"Computer Science", "Girls":800, "r":4 },

{"Stream":"Mechanical", "Girls":200, "r":6 },

{"Stream":"Electical", "Girls":800, "r":3 },

{"Stream":"Electronics", "Girls":500, "r":8 },

{"Stream":"Civil", "Girls":300, "r":7 }

[Bindable]

public var student1:ArrayCollection = new ArrayCollection([

{"Stream":"Management", "Boys":1400, "r":7},

{"Stream":"Computer Science", "Boys":1200, "r":8},

{"Stream":"Mechanical", "Boys":1500, "r":2},

{"Stream":"Electical", "Boys":850, "r":5},

{"Stream":"Electronics", "Boys":1000, "r":10},

{"Stream":"Civil", "Boys":900, "r":1}

[Bindable]

public var student2:ArrayCollection = new ArrayCollection([

{"Stream":"Management", "TotalStudent":2400, "r":3},

{"Stream":"Computer Science", "TotalStudent":2000, "r":7},

{"Stream":"Mechanical", "TotalStudent":1700, "r":4},

{"Stream":"Electical", "TotalStudent":1650, "r":10},

{"Stream":"Electronics", "TotalStudent":1500, "r":1},

{"Stream":"Civil", "TotalStudent":1200, "r":9}

private function effect():void{

leg1.setStyle("color", "#FFFFFF");

</fx:Script>

<s:Panel title="Formatting Legend in Chart Example" width="521" height="520">

<s:layout>

<s:VerticalLayout horizontalAlign="center"/>

</s:layout>

<mx:BubbleChart id="bubblechart1"

minRadius="1"

maxRadius="10"

showDataTips="true"

paddingBottom="10"

paddingLeft="10"

paddingRight="10"

paddingTop="10"

width="515">

<mx:verticalAxis>

<mx:CategoryAxis categoryField="Stream"

dataProvider="{student}"/>

</mx:verticalAxis>

<mx:series>

<mx:BubbleSeries id="as1"

xField="Girls"

yField="Stream"

displayName="Girls"

fill="{s1}"

stroke="{scs1}"

dataProvider="{student}"

radiusField="r"/>

<mx:BubbleSeries id="as2"

xField="Boys"

yField="Stream"

displayName="Boys"

fill="{s2}"

stroke="{scs2}"

dataProvider="{student1}"

radiusField="r"/>

<mx:BubbleSeries id="as3"

xField="TotalStudent"

yField="Stream"

displayName="TotalStudent"

fill="{s3}"

stroke="{scs3}"

dataProvider="{student2}"

radiusField="r"/>

</mx:series>

</mx:BubbleChart>

<s:Panel height="74" title="Legend">

<mx:Legend id="leg1"

dataProvider="{bubblechart1}"

direction="horizontal"

height="41" cornerRadius="20"/>

</s:Panel>

</s:Panel>