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:
Here is a brief description of the attributes used to customize tooltips:
| Attribute Name | Description |
|---|---|
|
Set the value to |
|
Specify background Color for tooltip. Accepts hex code. e.g. |
|
Specify tooltip border color. Accepts hex code. e.g. |
|
The character specified as the value of this attribute separates the name and value displayed in tool tip. Accepts any string. e.g. |
|
Set the value to |
The data structure needed to customize tooltip border and background is given below:
{
"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"
}
]
}Tooltip text across multiple lines
A column 2D chart with the tooltip text across multiple lines looks as below:
Given below is a brief description of the toolText attribute used for this:
| Attribute Name | Description |
|---|---|
|
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 |
The data structure needed to render multi-line tooltips is given below:
{
"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"
}
]
}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:
-
Macros are case-insensitive
-
A macro which is not applicable will be treated as string
-
To use a macro name as text in tooltip use “" before the “$” sign. Example: to show “$value” in tooltip use “$value” in
tooltextattribute. -
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:
Below is a brief description of the attributes used:
| Attribute Name | Description |
|---|---|
|
In |
The data structure needed to customize tooltips to show tables is given below:
{
"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"
}
]
}
]
}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:
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.
The data structure needed to customize tooltips to show a detailed chart in the tooltip for a data plot is given below:
{
"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"
}
]
}