Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Prerequisites:

FusionCharts Suite XT supports macros to configure dynamic and contextual content in tooltips. A macro is an instruction recorded using a combination of characters for a specific purpose.
Tooltip macros in FusionCharts enable you to use chart labels, data values, display values etc. as variables, and plain text, to form a complete customized tooltip text.

Tooltips can be configured to include supplementary information about the data plotted on a chart. Macros allow you to automate the inclusion of this information, saving the effort of manual customization.

This article focuses on how macros can be used to customize the tooltip text for various chart elements. The article also introduces attributes that take the macros as values, along with plain text and HTML tags, to create and format the custom tooltip text.

Using Tooltip Macros

In the column 2D chart shown below, hover the mouse pointer over any of the data plots to see the default tooltip text:

FusionCharts will load here..
{ "chart": { "caption": "Harry's SuperMart: Sales Analysis for Top Five Store Locations", "subCaption": "YTD", "yAxisName": "Sales (In USD)", "numberPrefix": "$", "showValues": "1", "theme": "fint" }, "data": [ { "label": "Bakersfield Central", "value": "750000", "displayValue": "Store manager: Victoria" }, { "label": "Garden Groove Harbour", "value": "700000", "displayValue": "Store manager: Teresa" }, { "label": "Los Angeles Topanga", "value": "690000", "displayValue": "Store manager: Elvis" }, { "label": "Compton-Rancho Dom", "value": "650000", "displayValue": "Store manager: Pete" }, { "label": "Daly City Serramonte", "value": "620000", "displayValue": "Store manager: Reesa" } ] }
{
    "chart": {
        "caption": "Harry's SuperMart: Sales Analysis for Top Five Store Locations",
        "subCaption": "YTD",
        "yAxisName": "Sales (In USD)",
        "numberPrefix": "$",
        "showValues": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Bakersfield Central",
            "value": "750000",
            "displayValue": "Store manager: Victoria"
        },
        {
            "label": "Garden Groove Harbour",
            "value": "700000",
            "displayValue": "Store manager: Teresa"
        },
        {
            "label": "Los Angeles Topanga",
            "value": "690000",
            "displayValue": "Store manager: Elvis"
        },
        {
            "label": "Compton-Rancho Dom",
            "value": "650000",
            "displayValue": "Store manager: Pete"
        },
        {
            "label": "Daly City Serramonte",
            "value": "620000",
            "displayValue": "Store manager: Reesa"
        }
    ]
}
<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',
    id: "myChart",
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Harry's SuperMart: Sales Analysis for Top Five Store Locations",
            "subCaption": "YTD",
            "yAxisName": "Sales (In USD)",
            "numberPrefix": "$",
            "showValues": "1",
            "theme": "fint"
            },
        "data": [{
          "label": "Bakersfield Central",
          "value": "750000",
          "displayValue": "Store manager: Victoria"
        }, {
          "label": "Garden Groove Harbour",
          "value": "700000",
          "displayValue": "Store manager: Teresa"
        }, {
          "label": "Los Angeles Topanga",
          "value": "690000",
          "displayValue": "Store manager: Elvis"
        }, {
          "label": "Compton-Rancho Dom",
          "value": "650000",
          "displayValue": "Store manager: Pete"
        }, {
          "label": "Daly City Serramonte",
          "value": "620000",
          "displayValue": "Store manager: Reesa"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Now, look at the tooltip text for the data plots in the column 2D chart below:

FusionCharts will load here..
{ "chart": { "caption": "Harry's SuperMart: Sales Analysis for Top Five Store Locations", "subCaption": "YTD", "yAxisName": "Sales (In USD)", "numberPrefix": "$", "showValues": "1", "plotToolText": "Store location: $label
Sales (YTD): $dataValue
$displayValue", "theme": "fint" }, "data": [ { "label": "Bakersfield Central", "value": "750000", "displayValue": "Store manager: Victoria" }, { "label": "Garden Groove Harbour", "value": "700000", "displayValue": "Store manager: Teresa" }, { "label": "Los Angeles Topanga", "value": "690000", "displayValue": "Store manager: Elvis" }, { "label": "Compton-Rancho Dom", "value": "650000", "displayValue": "Store manager: Pete" }, { "label": "Daly City Serramonte", "value": "620000", "displayValue": "Store manager: Reesa" } ] }
{
    "chart": {
        "caption": "Harry's SuperMart: Sales Analysis for Top Five Store Locations",
        "subCaption": "YTD",
        "yAxisName": "Sales (In USD)",
        "numberPrefix": "$",
        "showValues": "1",
        "plotToolText": "Store location: $label <br> Sales (YTD): $dataValue <br> $displayValue",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Bakersfield Central",
            "value": "750000",
            "displayValue": "Store manager: Victoria"
        },
        {
            "label": "Garden Groove Harbour",
            "value": "700000",
            "displayValue": "Store manager: Teresa"
        },
        {
            "label": "Los Angeles Topanga",
            "value": "690000",
            "displayValue": "Store manager: Elvis"
        },
        {
            "label": "Compton-Rancho Dom",
            "value": "650000",
            "displayValue": "Store manager: Pete"
        },
        {
            "label": "Daly City Serramonte",
            "value": "620000",
            "displayValue": "Store manager: Reesa"
        }
    ]
}
<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',
    id: "myChart",
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Harry's SuperMart: Sales Analysis for Top Five Store Locations",
            "subCaption": "YTD",
            "yAxisName": "Sales (In USD)",
            "numberPrefix": "$",
            "showValues": "1",
            "plotToolText": "Store location: $label <br> Sales (YTD): $dataValue <br> $displayValue",
            "theme": "fint"
            },
        "data": [{
          "label": "Bakersfield Central",
          "value": "750000",
          "displayValue": "Store manager: Victoria"
        }, {
          "label": "Garden Groove Harbour",
          "value": "700000",
          "displayValue": "Store manager: Teresa"
        }, {
          "label": "Los Angeles Topanga",
          "value": "690000",
          "displayValue": "Store manager: Elvis"
        }, {
          "label": "Compton-Rancho Dom",
          "value": "650000",
          "displayValue": "Store manager: Pete"
        }, {
          "label": "Daly City Serramonte",
          "value": "620000",
          "displayValue": "Store manager: Reesa"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The tooltip text for the second chart is configured using tooltip macros. The plotToolText attribute is used to set a custom tooltip, using macros, and format it, using HTML tags, as shown in the code snippet below:

"plotToolText": "Store location: $label <br> Sales (YTD): $dataValue <br> $displayValue"

The table below describes the attribute and macros used in the above example:

Attribute/Macro Name Description

plotToolText

This attribute accepts macros, plain text and HTML tags, as strings to create custom tooltip text for data plots.

$label

This macro represents the data plot, category, connector, and marker labels.
In the above sample, it represents the data plot label.

$dataValue

This macro represents the formatted data plot, entity, and marker data values. In the above example it is the data plot value.
Alternatively, the $value macro, which represents the unformatted data value, can also be used.

Therefore, if the data plot value is 750000,
if $value is used, then 750000 is rendered as the value
if $dataValue is used, then $750K is rendered as the value

$displayValue

This macro represents the value of the displayValue attribute of the data and entity objects.

Other Chart Attributes that Support Tooltip Macros

The table below describes some of the commonly used FusionCharts attributes that take tooltip macros as values to customize tooltip text for the various chart elements.

Attribute Name Description

trendLineToolText

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for trend-lines
This attribute belongs to the chart object.

cumulativePlotTooltext

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for all/individual data plots in a Pareto Chart
This attribute can be used with the chart as well as with the data object.

targetToolText

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the target in the horizontal and vertical bullet graphs
This attribute belongs to the chart object.

milestoneToolText

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the milestones in Gantt charts
This attribute belongs to the chart object.

errorPlotToolText

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the data plots in error charts
This attribute belongs to the dataset and the data objects.

horizontalErrorPlotToolText

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the horizontal error bars in error scatter charts
This attribute belongs to the dataset and the data objects.

verticalErrorPlotToolText

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the vertical error bars in error scatter charts
This attribute belongs to the dataset and the data objects.

entityToolText

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the entities in maps
This attribute belongs to the map (or the chart) object.

markerToolText

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the markers in maps
This attribute belongs to the map (or the chart) object.

connectorToolText

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the connectors in maps and the drag-node chart
This attribute belongs to the map (or the chart) object (for maps) and the connectors object (for the drag-node chart).

outliersTooltext

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the outliers in the Box and Whisker chart
This attribute belongs to the dataset and the data objects.

meanTooltext

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the mean icon in the Box and Whisker chart
This attribute belongs to the dataset and the data objects.

SDTooltext

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the standard deviation icon in the Box and Whisker chart
This attribute belongs to the dataset and the data objects.

QDTooltext

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the quartile deviation icon in the Box and Whisker chart
This attribute belongs to the dataset and the data objects.

MDTooltext

Accepts macros, plain text, and HTML tags, as strings, for customizing tooltip text for the mean deviation icon in the Box and Whisker charts
This attribute belongs to the dataset and the data objects.

Top