Tooltip Customization


Starting from 3.9 release we can decide what to display in the tooltip of VitaraCharts. The new HTML editor in the “Tooltip” property menu can be used to edit tooltip. Below is the screenshot of the tooltip editor window.

tooltip customization1

The editor is a lightweight component that supports the following features:

Alignment (Right, Center, Left and Justify)

Font Style (Family, Size, Bold, Italic, Underline, Color)

Recognizing new lines


Support for macros (described below)

Macro Support:

Below is the screenshot of the macro suggestion box. Hover the cursor over the ‘i’ symbol to see the available macros in the chart.

tooltip customization2

The new tooltip editor component will provide (via invocation configuration parameters) all the possible element names that should be supported as macros. For instance, if a report has Country, Category as attributes and Sales, Profit Margin as metrics, then all the following are possible macros in tooltip editor:



Profit Margin


Metric Names

Metric Values

Attribute Values

When a user starts typing “&” character, all the possible macro suggestions will be shown.

tooltip customization3

Once any of the macro elements are selected, the editor displays them in the text (and saves them in the state) as &[macroname]

So for instance, if the user chooses ‘Metric Names’, the displayed macro will be &[Metric Names]

The width of the tooltip is fixed at 30px. The height will grow as needed. There are some special macros; ‘Metric Names’, ‘Metric Values’ and ‘Attribute Values’

Typical usage will be something like: &[Metric Names]: &[Metric Values] Or &[Metric Names] = &[Metric Values]

Here we iterate through all the metrics (including the ones in the tooltip zones and data zones) and present them in the chosen format.

The macro ‘Attribute Values’, as the name suggests, includes the attribute elements (comma separated) at which the data point is evaluated. For instance, if a data point corresponds to Country=USA and Category=Electronics, the ‘Attribute Values’ macro will replace with the USA, Electronics.

Attribute forms in Tooltip

In tooltip, we can choose to display the macros for all the attribute forms for all the attributes.

For example, there are two attributes ‘category’ and ‘subcategory’, both enabled with attribute forms. Then in tooltip macros, we can select macros for all attribute forms of both the attributes. See the screenshot.