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: | ||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
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' /> |
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
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' /> |
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
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' /> |
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
This style when applied to a text on chart (e.g., caption), gives the following output: | ||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
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: |
||||||||||||||||||||||||||||||||||||
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' /> |
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
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'/> |
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
The above style when applied to chart caption, gives the following output: |
||||||||||||||||||||||||||||||||||||
|