Show how to use CSS class selectors to set the labelPosition and other properties that affect the appearance of data labels in a chart : CSS « Style « Flex






Show how to use CSS class selectors to set the labelPosition and other properties that affect the appearance of data labels in a chart

Show how to use CSS class selectors to set the labelPosition and other properties that affect the appearance of data labels in a chart
        
<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->
<!-- charts/StylingDataLabels.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        import mx.collections.ArrayCollection;
        [Bindable]
        public var expenses:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Income:2000, Expenses:1500},
            {Month:"Feb", Income:1000, Expenses:200},
            {Month:"Mar", Income:1500, Expenses:500}
            ]);
        /*
        Style properties on series that affect data labels:
        fontFamily; fontSize; fontStyle; fontWeight;
        labelPosition; labelRotation; labelSizeLimit
        */
      </mx:Script>
    <mx:Style>
        .incomeSeries { 
            fontSize:9; 
            fontWeight:bold; 
            labelPosition:inside;
            labelAlign:top; 
        } 
        .expensesSeries { 
            fontSize:8; 
            labelPosition:inside;
            labelAlign:middle; 
         }
    </mx:Style>
    <mx:Panel title="Column Chart">
        <mx:ColumnChart id="myChart" dataProvider="{expenses}"
            showDataTips="true">
            <mx:horizontalAxis>
                <mx:CategoryAxis dataProvider="{expenses}"
                    categoryField="Month" />
            </mx:horizontalAxis>
            <mx:verticalAxis>
                <mx:LinearAxis minimum="0" maximum="2500" />
            </mx:verticalAxis>
            <mx:series>
                <mx:ColumnSeries xField="Month" yField="Income"
                    displayName="Income" styleName="incomeSeries" />
                <mx:ColumnSeries xField="Month" yField="Expenses"
                    displayName="Expenses" styleName="expensesSeries" />
            </mx:series>
        </mx:ColumnChart>
    </mx:Panel>
</mx:Application>

   
    
    
    
    
    
    
    
  








Related examples in the same category

1.CSS InlineCSS Inline
2.CSS Style TagCSS Style Tag
3.CSS like StylesCSS like Styles
4.Styles with NamespaceStyles with Namespace
5.Flex CSS: class definitions that work the same way as HTML CSSFlex CSS: class definitions that work the same way as HTML CSS
6.Using CSS to apply graphical skinsUsing CSS to apply graphical skins
7.Apply dropShadowEnabled to CSSApply dropShadowEnabled to CSS
8.CSS over writeCSS over write
9.Add CSS for ApplicationAdd CSS for Application
10.CSS class with namespace and without namespaceCSS class with namespace and without namespace
11.Changing CSS SelectorsChanging CSS Selectors
12.CSS Type SelectorCSS Type Selector
13.Embeds an image in CSSEmbeds an image in CSS
14.Define the mySize variable and uses it in the CSSDefine the mySize variable and uses it in the CSS
15.To specify an Array for the fills property in CSS, you use a comma-separated listTo specify an Array for the fills property in CSS, you use a comma-separated list
16.Two Spark Button controls inherit the styles of the Group descendant selectorTwo Spark Button controls inherit the styles of the Group descendant selector
17.Using Spark namespace for the Button components and the MX namespace for the Box containersUsing Spark namespace for the Button components and the MX namespace for the Box containers
18.Using 9-slice propertiesUsing 9-slice properties
19.Default unit is pixelsDefault unit is pixels
20.Numeric Format Color ValueNumeric Format Color Value
21.Color Format InlineColor Format Inline
22.CamelCase vs hyphenCamelCase vs hyphen
23.Use tag, set the styles using CSS syntaxUse <mx:Style> tag, set the styles using CSS syntax
24.CSS hexadecimal format for CSS style definitions and tag supportCSS hexadecimal format for CSS style definitions and <mx:Style> tag support
25.Loading style sheets defined in CSS at run timeLoading style sheets defined in CSS at run time
26.Adding global CSS styles
27.When you use the tag, you set the styles by using CSS syntax or a reference to an external file that contains style declarations, as the following example shows:When you use the <fx:Style> tag, you set the styles by using CSS syntax or a reference to an external file that contains style declarations, as the following example shows:
28.The following example sets styles by using CSS on the Legend control:The following example sets styles by using CSS on the Legend control:
29.Apply style with CSSApply style with CSS
30.CSS style vs Control property style settingCSS style vs Control property style setting
31.Use CSS to Style ComponentsUse CSS to Style Components
32.Embed Styles by Using CSSEmbed Styles by Using CSS
33.Change CSS style at runtimeChange CSS style at runtime
34.TextInput CSS styleTextInput CSS style
35.CSS style by IDCSS style by ID