Configure Chart Messages

You can change the text and style of the chart status messages that appear throughout the life cycle of the chart.

Below is a list of status and error messages that can be set for any chart in the FusionCharts constructor.

In this section, you will be shown how yoou can:

• Set custom messages
• Use style for chart messages

Setting custom messages

A simple column 2D chart that displays custom dataLoadStartMessage is shown below:

The constructor for the chart is shown below:

    var revenueChart = new FusionCharts({
        type: 'column2d',
        dataLoadStartMessage: "Fetching revenue data for the previous year",
        renderAt: 'chart-container',
        width: '550',
        height: '350',
        dataFormat: 'xmlurl',
        dataSource: 'columndata.php'
    });

Simlarly, other chart messages can be set using constructor parameters.

Styling chart messages

Custom styles can also be applied to these messages, i.e. setting custom text font, font-size and color.

To apply common styling to all chart messages, use these attributes:

A column 2D chart that has custom style for all messages looks like this:

The constructor data for the chart is shown below:

    var revenueChart = new FusionCharts({
        type: 'column2d',
        dataLoadStartMessage: "Fetching revenue data for the previous year",
        baseChartMessageFont: "Arial",
        baseChartMessageFontSize: "18",
        baseChartMessageColor: "#FC0000",
        renderAt: 'chart-container',
        width: '550',
        height: '350',
        dataFormat: 'xmlurl',
        dataSource: 'columndata.php'
    });

To override styling for individual chart messages, there are attributes corresponding to each type of message. These attributes use a common scheme. Append Font, FontSize or Color to the specific chart message constructor parameter to customise the font, font-size or color of the message respectively.

For example, to customise styling of dataLoadStartMessage, the attributes will be:

    dataLoadStartMessageFont: 'Helvetica',
    dataLoadStartMessageFontSize: '24',
    dataLoadStartMessageColor: ‘#00FF00'

Given below is a table of all the attributes for applying styles for each of these messages: