The following example shows how you can set the font weight of a Flex Charting Legend control by setting the fontWeight style on the LegendItem CSS selector.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/25/setting-the-font-weight-on-a-charting-legend-control-in-flex/ -->
<mx:Application name="LegendItem_fontWeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        LegendItem {
            fontWeight: normal;
        }
    </mx:Style>
 
    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <product label="Product 1" data="3" />
                <product label="Product 2" data="1" />
                <product label="Product 3" data="4" />
                <product label="Product 4" data="1" />
                <product label="Product 5" data="5" />
                <product label="Product 6" data="9" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>
 
    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>
 
</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/25/setting-the-font-weight-on-a-charting-legend-control-in-flex/ -->
<mx:Application name="LegendItem_fontWeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.charts.Legend;
            import mx.charts.PieChart;
            import mx.charts.series.PieSeries;
            import mx.collections.XMLListCollection;
            import mx.containers.ControlBar;
            import mx.containers.Panel;
            import mx.containers.TileDirection;
 
            private var dp:XMLListCollection;
            private var legend:Legend;
            private var panel:Panel;
            private var pieChart:PieChart;
            private var pieSeries:PieSeries;
 
            private function init():void {
                dp = new XMLListCollection();
                dp.addItem(<product label="Product 1" data="3" />);
                dp.addItem(<product label="Product 2" data="1" />);
                dp.addItem(<product label="Product 3" data="4" />);
                dp.addItem(<product label="Product 4" data="1" />);
                dp.addItem(<product label="Product 5" data="5" />);
                dp.addItem(<product label="Product 6" data="9" />);
 
                pieSeries = new PieSeries();
                pieSeries.field = "@data";
                pieSeries.nameField = "@label";
                pieSeries.filters = [];
 
                pieChart = new PieChart();
                pieChart.dataProvider = dp;
                pieChart.showDataTips = true;
                pieChart.percentWidth = 100;
                pieChart.percentHeight = 100;
                pieChart.series = [pieSeries];
 
                legend = new Legend();
                legend.dataProvider = pieChart;
                legend.direction = TileDirection.HORIZONTAL;
                legend.percentWidth = 100;
                legend.setStyle("horizontalGap", 100);
 
                var controlBar:ControlBar = new ControlBar();
                controlBar.percentWidth = 100;
                controlBar.addChild(legend);
 
                panel = new Panel();
                panel.styleName = "opaquePanel";
                panel.percentWidth = 100;
                panel.percentHeight = 100;
                panel.addChild(pieChart);
                panel.addChild(legend);
                addChild(panel);
 
                var legendItemCSS:CSSStyleDeclaration;
                legendItemCSS = StyleManager.getStyleDeclaration("LegendItem");
                legendItemCSS.setStyle("fontWeight", "normal");
            }
        ]]>
    </mx:Script>
 
</mx:Application>

For an example of changing the fontWeight style on the MX Legend control in Flex 4, see “Setting the font weight on the MX Legend control in Flex 4″.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

7 Responses to Setting the font weight on a charting Legend control in Flex

  1. shaggy says:

    thanks very useful

    • BrunoJCM says:

      I’m trying to define the font family on my style too, but when I put a embedded font, Flex ignores the direction=”horizontal”:
      .myLegend {
      font-family: Myriad-Web;
      font-size: 12;
      font-weight: normal;
      }
      If I put a non-embedded font, the direction=”horizontal” works great.
      Any ideas?

  2. Peter deHaan says:

    For an example of changing the fontWeight style on the MX Legend control in Flex 4, see “Setting the font weight on the MX Legend control in Flex 4″.

    Peter

  3. je ,qa says:

    JemaPampa macolo