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..

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.

The data structure needed to customize the text rendered on the canvas is given 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" } ] }
{
    "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"
        }
    ]
}

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..

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.

The data structure needed to customize the text rendered outside the canvas using these attributes is given 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" } ] }
{
    "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"
        }
    ]
}

Notice that, `outCanvasBaseFont` group overrides the setting of the `baseFont` group.

Top