You use the BubbleChart control to represent data with three values for each data point: a value that determines its position along the x-axis, a value that determines its position along the y-axis, and a value that determines the size of the chart symbol, relative to the other data points on the chart.

The <mx:BubbleChart> tag takes additional properties, minRadius and maxRadius. These style properties specify the minimum and maximum radii of the chart elements, in pixels. The data point with the largest value will be less than the maxRadius and the data point with the smallest value will be larger than the minRadius property. For example, if you set the minRadius to 10 and the maxRadius to 50, all data points will have a radius between 10 and 50. The default value for maxRadius is 50 pixels. The default value for minRadius is 0 pixels. You can also control the minRadius and maxRadius properties by using properties of the same name on the BubbleSeries class.

The following example shows a bubble chart:

You use the BubbleSeries chart series with the BubbleChart control to define the data for the chart. The following table describes the properties of the BubbleSeries chart series that you commonly use to define your chart:

The following example draws a BubbleChart control and sets the maximum radius of bubble elements to 50:

<?xml version="1.0"?>
<!-- charts/BasicBubble.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:120, Amount:45},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:60},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:30}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Bubble Chart">
     <mx:BubbleChart id="myChart" 
        minRadius="1" 
        maxRadius="50" 
        dataProvider="{expenses}" 
        showDataTips="true"
     >
        <mx:series>
           <mx:BubbleSeries 
                xField="Profit" 
                yField="Expenses" 
                radiusField="Amount" 
                displayName="Profit"
           />
        </mx:series>
     </mx:BubbleChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

To customize the styles of the bubbles in a BubbleChart control, you use the fill and stroke properties. You pass these a SolidColor and a Stroke object, respectively. The following example defines a custom SolidColor object and a custom Stroke object, and applies them to the BubbleSeries object in the BubbleChart control.

<?xml version="1.0"?>
<!-- charts/BubbleFills.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var s1:ArrayCollection = new ArrayCollection( [
                {"x": 20, "y": 10, "r":10 },
                {"x": 40, "y": 5, "r":20 } ,
                {"x": 60, "y": 0, "r":30 }]);
    ]]>
    </mx:Script>

    <!-- Define custom color and line style for the bubbles. -->
    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
    <mx:Stroke id="stroke1" color="blue" weight="2"/>
    
    <mx:Panel title="BubbleChart Control with Custom Bubble Styles">
        <mx:BubbleChart id="myChart" showDataTips="true"> 
            <mx:series>
                <mx:BubbleSeries 
                    dataProvider="{s1}" 
                    displayName="series1" 
                    xField="x" 
                    yField="y" 
                    radiusField="r"
                    fill="{sc1}"
                    stroke="{stroke1}"
                />
            </mx:series>   
        </mx:BubbleChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

For more information on using fills, see Using fills with chart controls. For more information on using the Stroke class, see Using strokes with chart controls.

Using multiple series in BubbleChart controls

As with other chart controls, you can have multiple series in a BubbleChart control. There is an additional consideration when using multiple series in a BubbleChart control. You must decide whether you want the size of the bubbles in both series to be relative to bubbles in the other series or relative to only the other bubbles in their own series.

For example, you have two series, A and B. Series A has bubbles with radius values of 10, 20, and 30. Series B has bubbles with radius values of 2, 4, and 8. Your BubbleChart control can display bubbles in series A that are all larger than the bubbles in series B. You can also design a BubbleChart control so that the bubbles' sizes in series A are not relative to bubbles in series B. Flex renders the bubble with a radius 10 in series A and the bubble with a radius of 2 in series B the same size.

If you want the size of the bubbles to be relative to each other in the different series, add both series in the series array, as the following example shows:

<?xml version="1.0"?>
<!-- charts/BubbleRelativeSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var s1:ArrayCollection = new ArrayCollection( [
                {"x": 20, "y": 10, "r":10 },
                {"x": 40, "y": 5, "r":20 } ,
                {"x": 60, "y": 0, "r":30 }]);
                
            [Bindable]
            private var s2:ArrayCollection = new ArrayCollection( [
                {"x": 20, "y": 50, "r":2 },
                {"x": 40, "y": 75, "r":4 },
                {"x": 60, "y": 100, "r":8 } ]);

    ]]>
    </mx:Script>
    
    <mx:Panel title="Bubble Chart (Bubbles relative to other series)">
        <mx:BubbleChart id="myChart" 
            showDataTips="true" 
        > 
            <mx:series>
                <mx:BubbleSeries 
                    dataProvider="{s1}" 
                    displayName="series1" 
                    xField="x" 
                    yField="y" 
                    radiusField="r"
                />
                <mx:BubbleSeries 
                    dataProvider="{s2}" 
                    displayName="series2" 
                    xField="x" 
                    yField="y" 
                    radiusField="r"
                />
            </mx:series>   
        </mx:BubbleChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following example shows a BubbleChart control with two series whose bubbles' sizes are relative to one another:

If you want the size of the bubbles to be relative to each other in their own series, but not to other series, use a different radial axis for each series. To do this, you add a <mx:radialAxis> child tag to the <mx:BubbleSeries> tag in the MXML. This creates two series in the BubbleChart control whose bubble sizes are independent of one another. The following example shows a BubbleChart control with two independant series:

<?xml version="1.0"?>
<!-- charts/BubbleNonRelativeSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var s1:ArrayCollection = new ArrayCollection( [
                {"x": 20, "y": 10, "r":10 },
                {"x": 40, "y": 5, "r":20 } ,
                {"x": 60, "y": 0, "r":30 }]);
                
            [Bindable]
            private var s2:ArrayCollection = new ArrayCollection( [
                {"x": 20, "y": 50, "r":1 },
                {"x": 40, "y": 75, "r":2 },
                {"x": 60, "y": 100, "r":3 } ]);

    ]]>
    </mx:Script>

    <mx:Panel title="Bubble Chart (Bubbles not relative across series)">
        <mx:BubbleChart id="myChart" 
            showDataTips="true" 
        >
            <mx:series>
                <mx:BubbleSeries 
                    dataProvider="{s1}" 
                    displayName="series1" 
                    xField="x" 
                    yField="y" 
                    radiusField="r"
                >
                    <mx:radiusAxis>
                        <mx:LinearAxis/>
                    </mx:radiusAxis>
                </mx:BubbleSeries>
                <mx:BubbleSeries 
                    dataProvider="{s2}" 
                    displayName="series2" 
                    xField="x" 
                    yField="y" 
                    radiusField="r"
                >
                    <mx:radiusAxis>
                        <mx:LinearAxis/>
                    </mx:radiusAxis>
                </mx:BubbleSeries>                  
            </mx:series>   
        </mx:BubbleChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following example shows a BubbleChart control with two series whose bubble sizes are independant of one another: