In the Property Inspector, for the af:convertNumber tag, specify the values as

Using ADF Graph Components 24-27 ■ -tr-font-style: Specifies the style of the font. Valid values are normal or italic. ■ -tr-font-weight: Specifies the weight of the font. Valid values are normal or bold. ■ -tr-text-decoration: Specifies whether or not the underline emphasis is rendered. Valid values are none or underline. ■ -tr-color: Specifies the color of the font. Valid values are color names for HTML and CSS. The World Wide Consortium lists 17 valid color names including aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange CSS 2.1, purple, red, silver, teal, white, and yellow. You can also use 3, 6, or 8 digits HEX alpha channel is first 2 digit in 8 digit HEX, RGB, or RGBA. For example, specify the font family for all graph titles in a mySkin.css file as follows: af|dvt-graphTitle, { -tr-font-family: Comic Sans MS: } 2. Register the custom skin with the application in the trinidad-skins.xml file. For example, mySkin.css extends the default blafplus-rich.desktop style sheet: ?xml version=1.0 encoding=ISO-8859-1? skins xmlns=http:myfaces.apache.orgtrinidadskin skin idmySkinExtends.desktopid familymySkinExtendsfamily extendsblafplus-rich.desktopextends render-kit-idorg.apache.myfaces.trinidad.desktoprender-kit-id style-sheet-nameskinsmySkin.cssstyle-sheet-name skin skins 3. Configure the application to use the custom skin in the trinidad-config.xml file. For example: trinidad-config xmlns=http:myfaces.apache.orgtrinidadconfig skin-familymySkinskin-family trinidad-config 4. Package the custom skin into a jar file to deploy with the application. The trinidad-skins.xml file that defines the skin and that references the CSS file must be within the META-INF directory. For detailed information about applying a custom skin to applications, see Chapter 20, Customizing the Appearance Using Styles and Skins.

24.6.4 Changing Graph Size and Style

You can customize the width and height of a graph and you can allow for dynamic resizing of a graph based on changes to the size of its container. You can also control the style sheet used by a graph. These two aspects of a graph are interrelated in that they share the use of the graph inlineStyle attribute. 24-28 Web User Interface Developers Guide for Oracle Application Development Framework

24.6.4.1 How to Specify the Size of a Graph at Initial Display

You can specify the initial size of a graph by setting values for attributes of the dvt:typeGraph tag. If you do not also provide for dynamic resizing of the graph, then the initial size becomes the only display size for the graph. To specify the size of a graph at its initial display: 1. In the Structure window, right-click the graph node and choose Go to Properties. 2. In the Style attributes category of the Property Inspector, enter a value for the inlineStyle attribute of the graph tag. For example: inlineStyle=width:200px;height:200px

24.6.4.2 How to Provide for Dynamic Resizing of a Graph

You must enter values in each of two attributes of the dvt:typeGraph tag to allow for a graph to resize when its container in a JSF page changes in size. The values that you specify for this capability also are useful for creating a graph component that fills an area across different browser window sizes. To allow dynamic resizing of a graph: 1. In the Structure window, right-click the graph node and choose Go to Properties. 2. In the Behavior attributes category of the Property Inspector for the DynamicResize attribute, select the value DYNAMIC_SIZE. 3. In the Style attributes category of the Property Inspector for the InlineStyle attribute, enter a fixed number of pixels or a relative percent for both width and height. For example, to create a graph that fills its container’s width and has a height of 200 pixels, use the following setting for the inlineStyle attribute: width:100;height:200px;.

24.6.4.3 How to Use a Specific Style Sheet for a Graph

You have the option of selecting any of the standard styles available for the dvt:typeGraph tag. You can also specify a custom style sheet for use with a graph. To select a specific style sheet for a graph: 1. If you want to use one of the standard style sheets provided with the graph, do the following:

a. In the Structure window, right-click the graph node and choose Go to

Properties . b. In the Appearance attributes category, select the desired style sheet from the style attribute dropdown list. 2. If you want to use a custom style sheet, then set the following attributes in the Style attributes category of the Property Inspector: a. For the StyleClass attribute, select Edit from the Property menu choices, and select the CSS style class to use for this gauge. b. In the InlineStyle attribute, enter a fixed number of pixels or a relative percent for both width and height.