Data Tip Styles : Style « Style « Flex






Data Tip Styles

Data Tip Styles
             

<!--
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/DataTipStyles.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
  
  <fx:Script>
    import mx.collections.ArrayCollection;
    [Bindable]
    public var expenses:ArrayCollection = new ArrayCollection([
      {month:"Jan", profit:20, expenses:15, amount:145},
      {month:"Feb", profit:1, expenses:2, amount:60},
      {month:"Mar", profit:15, expenses:5, amount:3}
      ]);
    </fx:Script>  
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        mx|DataTip {
            fontFamily: "Arial";
            fontSize: 12;
            fontWeight:bold;
            fontStyle:italic;
        } 
    </fx:Style>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <mx:Panel title="Bar Chart">
        <mx:BarChart id="myChart" dataProvider="{expenses}"
            showDataTips="true">
            <mx:verticalAxis>
                <mx:CategoryAxis categoryField="month" />
            </mx:verticalAxis>
            <mx:series>
                <mx:BarSeries yField="month" xField="profit"
                    displayName="Profit" />
                <mx:BarSeries yField="month" xField="expenses"
                    displayName="Expenses" />
            </mx:series>
        </mx:BarChart>
        <mx:Legend dataProvider="{myChart}" />
    </mx:Panel>
</s:Application>

   
    
    
    
    
    
    
    
    
    
    
    
    
  








Related examples in the same category

1.Apply effects with ActionScript and not use stylesApply effects with ActionScript and not use styles
2.Alternate WipeRight and WipeLeft effects for the mouseDownEffect style of a Button controlAlternate WipeRight and WipeLeft effects for the mouseDownEffect style of a Button control
3.Using a local stylesheet to decouple the style implementationUsing a local stylesheet to decouple the style implementation
4.Using the plain style
5.Applying behaviors in MXML using stylesApplying behaviors in MXML using styles
6.Applying behaviors in ActionScript using stylesApplying behaviors in ActionScript using styles
7.Local style definitionsLocal style definitions
8.Inline stylesInline styles
9.Get style declaration for control
10.Flex Style with namespaceFlex Style with namespace
11.Flex supports both camel-case and hyphenated syntax in style sheetsFlex supports both camel-case and hyphenated syntax in style sheets
12.Set style declaration for multiple componentSet style declaration for multiple component
13.Basic Inheritance for styleBasic Inheritance for style
14.Extensible style propertiesExtensible style properties
15.Get style and convert style value to stringGet style and convert style value to string
16.Using inline stylesUsing inline styles
17.Call a method when the style sheet finishes loadingCall a method when the style sheet finishes loading
18.Applying skins by using the Style ManagerApplying skins by using the Style Manager
19.Apply style to globalApply style to global
20.Unload style declaration
21.Use style from style option
22.Compare the style of controlsCompare the style of controls
23.Set all styles in MXML as tag attributes.Set all styles in MXML as tag attributes.
24.Applying styles by binding tag definitionsApplying styles by binding tag definitions
25.setting the values of the gutterLeft, gutterRight, and gutterBottom style properties. It also sets the paddingTop property to 20.setting the values of the gutterLeft, gutterRight, and gutterBottom style properties. It also sets the paddingTop property to 20.
26.Apply axisTitleStyleName property without specifying itApply axisTitleStyleName property without specifying it
27.Override Base Style PropertiesOverride Base Style Properties
28.Component styles
29.Click to change styleClick to change style
30.Compiled stylesCompiled styles
31.Setting And Getting StylesSetting And Getting Styles
32.Customize Styles at RuntimeCustomize Styles at Runtime
33.Styles SubComponentsStyles SubComponents
34.Set various styles on the textSet various styles on the text
35.Styled Link ElementStyled Link Element
36.Use ActionScript to set StylesUse ActionScript to set Styles
37.To make development easier, however, Flex supports both the camel-case and hyphenated syntax in style sheetsTo make development easier, however, Flex supports both the camel-case and hyphenated syntax in style sheets
38.Inheritable StyleInheritable Style
39.Define MyStyle style and applies that style to the elements on the horizontal axisDefine MyStyle style and applies that style to the elements on the horizontal axis