Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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

  • Outside canvas base font group

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:

FusionCharts will load here..
{ "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" } ] }
{
    "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

baseFont

It specifies the font family to be used for rendering the text on the chart.

baseFontSize

It specifies the font size for all the values and names in the chart that lie on the canvas. This attribute takes values between 0 and 72.

baseFontColor

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:

FusionCharts will load here..
{ "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" } ] }
{
    "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

outCnvBaseFont

It specifies the font family to be used for rendering all the values and the names in the chart that lie outside the canvas.

outCnvBaseFontSize

It specifies the font size for all the text that lies outside the canvas. This attribute takes values between 0 and 72.

outCnvBaseFontColor

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.

Top