FusionCharts for Flex > Styles XML API > Font

As you already know, using the Font style type, you can control the visual properties of all the text on the chart. The following properties are extended by the Font type. Detailed explanations with code samples follow:
 

Attribute

Brief Description

Sample or Valid values

font

Sets the font-face for the text

Verdana, Arial ..

size

Specifies the font size

10, 12 ..

color

Sets the font color. It should be hex color code without #

FF0000, FFFFDD

bold

Flag indicating whether font should be bold or not

1 for Yes, 0 for No

italic

Flag indicating whether font should be italics or not

1 for Yes, 0 for No

underline

Flag indicating whether font should be underlined

1 for Yes, 0 for No

bgColor

Sets the background color for a text box. It should be hex color code without #

FF0000, FFFFDD

borderColor

Sets a border around your text

 

isHTML

Sets whether the text should be rendered as HTML or plain text

 

leftMargin

The left margin of the text, in points

 

letterSpacing

The amount of space that is uniformly distributed between characters of the text

 

 
Font face, size & color
The basic font settings of a text are its font-face , size and color, which can be set using the above mentioned attributes.

Example :

<style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' />

 

Attribute

Format

Example

font

font='fontface'

font='Verdana'

size

size='fontsize'

size='12'

color

color='HexCode (without #)'

color='FF0000'

 

Here, font should refer to a font-face, which is present on the end users system (else the default system font would be used to draw text). The color attribute should be provided as hex color code without any #.

 
bold, italic & underline
To decorate your text, you can use any of the above parameters as under:

<style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' bold='1' italic='1' underline='1' />

 

Attribute

Format

Example

bold

bold='Logicalvalue'

bold='1' or bold='0'

italic

italic='Logicalvalue'

italic='1' italic='0'

underline

underline='Logicalvalue'

underline='1' or underline='0'

 

The above code will make sure that your font appears as bold, italicized and underlined.

 
bgColor and borderColor
To put a border color or a background color for your texts on the chart, use the above two parameters and pass hex color code (without #) as shown under:

<style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' bgColor='FFFFDD' borderColor='666666' />
 

Attribute

Format

Example

bgColor

bgColor='value'

bgColor='FFFFDD'

borderColor

borderColor='value'

borderColor='666666'

 
This style when applied to a text on chart (e.g., caption), gives the following output:
 

Chart caption ("Products Per Category") with border and background color applied to it.

 
isHTML

This attribute is particularly useful, when you have HTML characters as a part of your text e.g., "< 5" or "> 5" etc. By default, FusionCharts renders all text as HTML and as such "< 5" will be treated as a non-closing HTML tag and wouldn't be displayed at all.

 

For example, if you've to display "< 5" for a particular set value, you need to use:
<set name='&lt; 5' value='7' />
(Note that &lt; is the encoded form of <, which is used in XML data documents).

 
The style type for this chart element, which contains the text would be defined as:

<style name='LabelFont' type='font' font='Arial' size='10' isHTML='0' />

 

Attribute

Format

Example

isHTML

isHTML ='Logicalvalue'

isHTML ='1' or isHTML ='0'

 
leftMargin and letterSpacing

leftMargin lets you set the left margin of the text (in points) and letterSpacing allows you to control the space that is uniformly distributed between characters. The value specifies the number of pixels that are added to the space after each character. A negative value condenses the space between characters.

Example -
<style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' bgColor='FFFFDD' borderColor='666666' leftMargin='10' letterSpacing='3'/>
 

Attribute

Format

Example

leftMargin

leftMargin='value in pixels'

leftMargin='10'

letterSpacing

letterSpacing='value in pixels'

letterSpacing='3'

 

The above style when applied to chart caption, gives the following output: