Fonts
Font properties for a chart include the font family, font size, and font color for the text rendered inside and outside the chart canvas.
This section will describe how you can customize the font properties for a chart. This section discusses:
Base font group
The base font group is used to customize the font properties for the text rendered on the chart.
A column 2D chart with customized base font properties looks as below:
{
"chart": {
"caption": "Quarterly revenue for last year",
"xAxisName": "Quarter",
"yAxisName": "Amount",
"yaxismaxvalue": "2720000",
"numberPrefix": "$",
"baseFont": "Verdana",
"baseFontSize": "11",
"baseFontColor": "#0066cc",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly revenue for last year",
"xAxisName": "Quarter",
"yAxisName": "Amount",
"yaxismaxvalue": "2720000",
"numberPrefix": "$",
//Base font configuration
"baseFont": "Verdana",
"baseFontSize": "11",
"baseFontColor": "#0066cc",
//Theme
"theme": "fint"
},
"data": [{
"label": "Q1",
"value": "1950000"
}, {
"label": "Q2",
"value": "1450000"
}, {
"label": "Q3",
"value": "1730000"
}, {
"label": "Q4",
"value": "2120000"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize this text:
| Attribute | Description |
|---|---|
|
It specifies the font family to be used for rendering the text on the chart. |
|
It specifies the font size for all the values and names in the chart that lie on the canvas. This attribute takes values between |
|
It specifies the hex color code for all the values and the names in the chart that lie on the canvas. |
Outside canvas base font group
The outside canvas base font group is used to customize the font properties for the text placed outside the chart canvas.
A column 2D chart with customized outside canvas base font properties looks as below:
{
"chart": {
"caption": "Quarterly revenue for last year",
"xAxisName": "Quarter",
"yAxisName": "Amount",
"yaxismaxvalue": "2720000",
"numberPrefix": "$",
"outCnvBaseFont": "Arial",
"outCnvBaseFontSize": "11",
"outCnvBaseFontColor": "#55AA00",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly revenue for last year",
"xAxisName": "Quarter",
"yAxisName": "Amount",
"yaxismaxvalue": "2720000",
"numberPrefix": "$",
//Outside canvas base font configuration
"outCnvBaseFont": "Arial",
"outCnvBaseFontSize": "11",
"outCnvBaseFontColor": "#55AA00",
//Theme
"theme": "fint"
},
"data": [{
"label": "Q1",
"value": "1950000"
}, {
"label": "Q2",
"value": "1450000"
}, {
"label": "Q3",
"value": "1730000"
}, {
"label": "Q4",
"value": "2120000"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize this text:
| Attribute | Description |
|---|---|
|
It specifies the font family to be used for rendering all the values and the names in the chart that lie outside the canvas. |
|
It specifies the font size for all the text that lies outside the canvas. This attribute takes values between |
|
It specifies the hex color code for all the text in the chart that lies outside the canvas. |
Notice that, `outCanvasBaseFont` group overrides the setting of the `baseFont` group.