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 should load here..

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.

The data structure needed to customize tooltip border and background is given below:

...

Tooltip text across multiple lines

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

FusionCharts should load here..

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

The data structure needed to render multi-line tooltips is given below:

...

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 should load here..

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>

The data structure needed to customize tooltips to show tables is given below:

...

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 should load here..

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:

...

Anchors and Lines
Vertical Lines