Font Style Type Parameters | |||||||||||||||||||||||||||||||||||||||
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. See it live! Detailed explanations with code samples follow: |
|||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||
Note: In JavaScript charts, only font, color, size, bold and italic attributes are supported. Support for rest of the attributes is browser specific. | |||||||||||||||||||||||||||||||||||||||
Font family, size & color | |||||||||||||||||||||||||||||||||||||||
The basic attributes of the font are its font family, size and color which can be set using the aforementioned attributes. Example: |
|||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||
Here, font should refer to a font family which is present on the end users system (else the default system font will be used to draw text). Color should be in Hex code without any #. |
|||||||||||||||||||||||||||||||||||||||
align | |||||||||||||||||||||||||||||||||||||||
Text align setting is only allowed in chart's caption and sub-caption Objects. You can use either "right" or "left" as alignment value. By default, the value is "center". An example can be: And the resultant chart caption will be like the image as under: |
|||||||||||||||||||||||||||||||||||||||
bold, italic & underline | |||||||||||||||||||||||||||||||||||||||
To decorate your text, you can use any of the above parameters as under: |
|||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||
The above code will make sure that your font appears as bold, italicized and underlined. |
|||||||||||||||||||||||||||||||||||||||
bgColor and borderColor | |||||||||||||||||||||||||||||||||||||||
If you intend to put a border color or a background color for your text boxes on the chart, you can use the above two parameters to define hex color code (without #) as under: <style name='MyFirstFontStyle' type='font' font='Verdana' size='9' bold='1' color='1F1F1F' bgColor='99E3BB' borderColor='E10000' /> "definition":[{ "name":"MyFirstFontStyle", "type":"font", "font":"Verdana", "size":"9", "bold":"1", "color":"1F1F1F", "bgcolor":"99E3BB", "bordercolor":"E10000" }] |
|||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||
This style when applied to a text field on chart (for example, caption), will give an output as under: |
|||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||
isHTML | |||||||||||||||||||||||||||||||||||||||
This attribute is particularly useful, when you have HTML characters as a part of your text. |
|||||||||||||||||||||||||||||||||||||||
And the style type will be defined as: | |||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||
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='9' bold='1' color='1F1F1F' bgColor='99E3BB' borderColor='E10000' leftMargin='10' letterSpacing='3'/> "definition":[{ "name":"MyFirstFontStyle", "type":"font", "font":"Verdana", "size":"9", "bold":"1", "color":"1F1F1F", "bgcolor":"99E3BB", "bordercolor":"E10000", "leftmargin":"10", "letterspacing":"3" }] |
|||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||
The above style when applied to chart caption, gives the following output:
|