Introduction to Tooltip Macros

Prerequisites:

Tooltips

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.

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

Chart
JSON
XML
HTML

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:

Chart
JSON
XML
HTML

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.

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.

Introduction to Tooltip Macros

Prerequisites:

Using Tooltip Macros

Other Chart Attributes that Support Tooltip Macros