FusionCharts Logo
FusionCharts Suite v3.11.0
Get Support
Version History
Demos
Beginner's Guide
Charts / Gauges / Maps Guide
Customizing Charts
API
Integrating With Your Stack
Help

Loading

Tooltips

A tooltip is displayed when the mouse is hovered over a particular data point. It denotes valuable information such as:

  • For a single series charts, it denotes the name and data value

  • For pie & doughnut charts, it denotes name and value/percentage

  • For a multi-series & combination chart, it denotes a series name, category name, and data value

This article explains how you can:

  • Use the old tooltext attribute

  • Customize tooltips

  • Show tooltip text across multiple lines

This article also includes:

  • Introduction to Macros

  • New chart-level attributes to support macros

  • Adding HTML tables in tooltips

  • Advanced usage of tooltip macros

Customizing tooltips

A column 2D chart with customized tooltip border and background looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Sales Summary", "subcaption": "For last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberprefix": "$", "toolTipBorderColor": "#FFFFFF", "toolTipBgColor": "#666666", "toolTipBgAlpha": "80", "theme": "fint" }, "data": [ { "label": "Q1", "value": "195000" }, { "label": "Q2", "value": "155000" }, { "label": "Q3", "value": "178000" }, { "label": "Q4", "value": "192000" } ] }
{
    "chart": {
        "caption": "Quarterly Sales Summary",
        "subcaption": "For last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "toolTipBorderColor": "#FFFFFF",
        "toolTipBgColor": "#666666",
        "toolTipBgAlpha": "80",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "195000"
        },
        {
            "label": "Q2",
            "value": "155000"
        },
        {
            "label": "Q3",
            "value": "178000"
        },
        {
            "label": "Q4",
            "value": "192000"
        }
    ]
}
<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: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Sales Summary",
            "subcaption": "For last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            //Tooltip customization        
            "toolTipBorderColor": "#FFFFFF",
            "toolTipBgColor": "#666666",
            "toolTipBgAlpha": "80",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "195000"
        }, {
            "label": "Q2",
            "value": "155000"
        }, {
            "label": "Q3",
            "value": "178000"
        }, {
            "label": "Q4",
            "value": "192000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Here is a brief description of the attributes used to customize tooltips:

Attribute Name Description

showToolTip

Set the value to 1 (default) to enable the tooltip or set it to 0 to disable it.

toolTipBgColor

Specify background Color for tooltip. Accepts hex code. e.g. #fffffff(default).

toolTipBorderColor

Specify tooltip border color. Accepts hex code. e.g. #545454.

toolTipSepChar

The character specified as the value of this attribute separates the name and value displayed in tool tip. Accepts any string. e.g. , (default), --

showToolTipShadow

Set the value to 1 (default) to enable the tooltip-shadow or set it to 0 to disable it.

Tooltip text across multiple lines

A column 2D chart with the tooltip text across multiple lines looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Sales Summary", "subcaption": "For last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberprefix": "$", "theme": "fint" }, "data": [ { "label": "Q1", "value": "195000", "tooltext": "Quarter 1{br}Total Sale: $195K{br}Rank: 1" }, { "label": "Q2", "value": "155000", "tooltext": "Quarter 2{br}Total Sale: $155K{br}Rank: 4" }, { "label": "Q3", "value": "178000", "tooltext": "Quarter 3{br}Total Sale: $178K{br}Rank: 3" }, { "label": "Q4", "value": "192000", "tooltext": "Quarter 4{br}Total Sale: $192K{br}Rank: 4" } ] }
{
    "chart": {
        "caption": "Quarterly Sales Summary",
        "subcaption": "For last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "195000",
            "tooltext": "Quarter 1{br}Total Sale: $195K{br}Rank: 1"
        },
        {
            "label": "Q2",
            "value": "155000",
            "tooltext": "Quarter 2{br}Total Sale: $155K{br}Rank: 4"
        },
        {
            "label": "Q3",
            "value": "178000",
            "tooltext": "Quarter 3{br}Total Sale: $178K{br}Rank: 3"
        },
        {
            "label": "Q4",
            "value": "192000",
            "tooltext": "Quarter 4{br}Total Sale: $192K{br}Rank: 4"
        }
    ]
}
<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: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Sales Summary",
            "subcaption": "For last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "195000",
            "tooltext": "Quarter 1{br}Total Sale: $195K{br}Rank: 1"
        }, {
            "label": "Q2",
            "value": "155000",
            "tooltext": "Quarter 2{br}Total Sale: $155K{br}Rank: 4"
        }, {
            "label": "Q3",
            "value": "178000",
            "tooltext": "Quarter 3{br}Total Sale: $178K{br}Rank: 3"
        }, {
            "label": "Q4",
            "value": "192000",
            "tooltext": "Quarter 4{br}Total Sale: $192K{br}Rank: 4"
        }]
    }
}
);
    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 toolText attribute used for this:

Attribute Name Description

toolText

By default, FusionCharts XT shows the data item name and value as tool tip text for that data item. But, if you want to display more information for the data item as tool tip. you can distlay the tooltip-text in multiline format. Use {br} to add line break in the text. e.g. Quarter 1{br}Total Sale: $195K{br}Rank: 1

Introduction to Macros

FusionCharts Suite XT 3.4 introduces macros to configure dynamic and contextual content in tooltips. This allows you to build custom tooltext for data points on the chart and saves a lot of manual effort by providing deeper customization.

Each chart contains labels, raw values, formatted values, display values etc. as variables that can be used in conjunction with your custom text to form the complete tooltext.

Some of the points to remember while using macros for tooltips:

  1. Macros are case-insensitive

  2. A macro which is not applicable will be treated as string

  3. To use a macro name as text in tooltip use “" before the “$” sign. Example: to show “$value” in tooltip use “$value” in tooltext attribute.

  4. Tooltext can also be configured from corresponding parent nodes (that is, chart, dataset, etc).

Adding HTML tables in tooltips

Using the plotToolText attribute , you can add dynamic HTML tables in tooltips too. A box and whisker chart with customized tooltips having tables and macros looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Distribution of annual salaries", "subcaption": "By Gender", "xAxisName": "Pay Grades", "YAxisName": "Salaries (In USD)", "theme": "fint", "showValues": "0", "numberPrefix": "$", "legendPosition": "right", "plottooltext": "
$label
Maximum$maxDatavalue
Q3$Q3
Median$median
Q1$Q1
Minimum$minDataValue
" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Males", "data": [ { "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000" }, { "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500" }, { "value": "15000,19000,25000,32000,50000,65000" } ] }, { "seriesname": "Females", "data": [ { "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000" }, { "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000" }, { "value": "24000,32000,35000,37000,39000, 58000" } ] } ] }
{
    "chart": {
        "caption": "Distribution of annual salaries",
        "subcaption": "By Gender",
        "xAxisName": "Pay Grades",
        "YAxisName": "Salaries (In USD)",
        "theme": "fint",
        "showValues": "0",
        "numberPrefix": "$",
        "legendPosition": "right",
        "plottooltext": "<div id='headerdiv'>$label</div><div><table width='120' border='1'><tr><td class='labelDiv'>Maximum</td><td class='allpadding'>$maxDatavalue</td></tr><tr><td class='labelDiv'>Q3</td><td class='allpadding'>$Q3</td></tr><tr><td class='labelDiv'>Median</td><td class='allpadding'>$median</td></tr><tr><td class='labelDiv'>Q1</td><td class='allpadding'>$Q1</td></tr><tr><td class='labelDiv'>Minimum</td><td class='allpadding'>$minDataValue</td></tr></table></div>"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Males",
            "data": [
                {
                    "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
                },
                {
                    "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
                },
                {
                    "value": "15000,19000,25000,32000,50000,65000"
                }
            ]
        },
        {
            "seriesname": "Females",
            "data": [
                {
                    "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
                },
                {
                    "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
                },
                {
                    "value": "24000,32000,35000,37000,39000, 58000"
                }
            ]
        }
    ]
}
<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: 'boxandwhisker2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Distribution of annual salaries",
            "subcaption": "By Gender",
            "xAxisName": "Pay Grades",
            "YAxisName": "Salaries (In USD)",
            "theme": "fint",
            "showValues": "0",
            "numberPrefix": "$",
            "legendPosition": "right",

            //Usage of tooltip macro to populate custom tooltip
            "plottooltext": "<div id='headerdiv'>$label</div><div><table width='120' border='1'><tr><td class='labelDiv'>Maximum</td><td class='allpadding'>$maxDatavalue</td></tr><tr><td class='labelDiv'>Q3</td><td class='allpadding'>$Q3</td></tr><tr><td class='labelDiv'>Median</td><td class='allpadding'>$median</td></tr><tr><td class='labelDiv'>Q1</td><td class='allpadding'>$Q1</td></tr><tr><td class='labelDiv'>Minimum</td><td class='allpadding'>$minDataValue</td></tr></table></div>"
        },
        "categories": [{
            "category": [{
                "label": "Grade 1"
            }, {
                "label": "Grade 2"
            }, {
                "label": "Grade 3"
            }]
        }],
        "dataset": [{
            "seriesname": "Males",
            "data": [{
                "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
            }, {
                "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
            }, {
                "value": "15000,19000,25000,32000,50000,65000"
            }]
        }, {
            "seriesname": "Females",
            "data": [{
                "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
            }, {
                "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
            }, {
                "value": "24000,32000,35000,37000,39000, 58000"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Below is a brief description of the attributes used:

Attribute Name Description

plotToolText

In plotToolText not only text or text containing macros, you can also provide HTML string as a value. All applicable styles and CSS will be applicable in this. e.g.
<div id='headerdiv'>$label</div><div><table width='120' border='1'><tr><td class='labelDiv'>Total Sale</td><td class='allpadding'>$value</td></tr><tr><td class='labelDiv'>Quarter</td><td class='allpadding'>$label</td></tr></table></div>

Advanced usage of tooltip macros

You can use the new plotToolText attribute introduced in FusionCharts Suite XT 3.4 to use macros in your chart to make it more informative.

A column 2D chart with customized tooltips to display a detailed pie 2D chart looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Visitor Composition by Age Group", "subCaption": "Last year", "enableSmartLabels": "0", "startingAngle": "0", "showPercentValues": "1", "showPercentInTooltip": "0", "decimals": "1", "plottooltext": "
$label :
{br}No. Of Visitors : $dataValue of the total $sum visitors{br}In Percentage : $percentValue", "theme": "fint" }, "data": [ { "label": "Teenage", "value": "1250400" }, { "label": "Adult", "value": "1463300" }, { "label": "Middle-age", "value": "1050700" }, { "label": "Senior Citizen", "value": "491000" } ] }
{
    "chart": {
        "caption": "Visitor Composition by Age Group",
        "subCaption": "Last year",
        "enableSmartLabels": "0",
        "startingAngle": "0",
        "showPercentValues": "1",
        "showPercentInTooltip": "0",
        "decimals": "1",
        "plottooltext": "<div id='nameDiv'>$label :</div>{br}No. Of Visitors : <b>$dataValue</b> of the total <b>$sum</b> visitors{br}In Percentage : <b>$percentValue</b>",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Teenage",
            "value": "1250400"
        },
        {
            "label": "Adult",
            "value": "1463300"
        },
        {
            "label": "Middle-age",
            "value": "1050700"
        },
        {
            "label": "Senior Citizen",
            "value": "491000"
        }
    ]
}
<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: 'pie2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Visitor Composition by Age Group",
            "subCaption": "Last year",
            "enableSmartLabels": "0",
            "startingAngle": "0",
            "showPercentValues": "1",
            "showPercentInTooltip": "0",
            "decimals": "1",
            //Dynamic tool-tip using HTML and macro variables
            "plottooltext": "<div id='nameDiv'>$label :</div>{br}No. Of Visitors : <b>$dataValue</b> of the total <b>$sum</b> visitors{br}In Percentage : <b>$percentValue</b>",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Teenage",
            "value": "1250400"
        }, {
            "label": "Adult",
            "value": "1463300"
        }, {
            "label": "Middle-age",
            "value": "1050700"
        }, {
            "label": "Senior Citizen",
            "value": "491000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

This can be made possible by using rollover() and rollout()events on the data plot that can be used to display the pie 2D chart for each data plot when the mouse pointer is hovered over it.

Top