Tooltip Customization


Starting with the 3.9 release, we can customise what appears in the VitaraCharts tooltip. To edit tooltips, utilise the new HTML editor in the “Tooltip” property menu. The tooltip editing window is seen in the screenshot below.

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:

The macro suggestion box is seen in the screenshot below. Hover the pointer over the ‘i’ sign to see the chart’s available macros.

tooltip customization2

The new tooltip editor component will give all possible element names that should be supported as macros (through invocation configuration options). For example, if a report has attributes Country, Category, and Sales, Profit Margin, then all of the following macros are possible in the 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

When one of the macro elements is selected, the editor inserts it into the text (and saves it in the state) as &[macroname].

So, if the user selects ‘Metric Names,’ the displayed macro will be &[Metric Names].

The tooltip’s width is fixed at 30px. As needed, the height will increase. There are certain unique macros, such as ‘Metric Names,’ ‘Metric Values,’ and ‘Attribute Values.’

Typical syntax is: &[Metric Names]: &[Metric Values] or &[Metric Names] = &[Metric Values]

We go over all of the metrics (including those in the tooltip and data zones) and provide them in the desired way here.

As the name implies, the ‘Attribute Values’ macro contains the attribute elements (comma separated) at which the data point is assessed. For example, if a data point has Country=USA and Category=Electronics, the ‘Attribute Values’ macro will replace it with USA, Electronics.

Attribute forms in Tooltip

We can opt to display the macros for all attribute forms for all attributes in the tooltip.

For example, there are two attributes with attribute forms: ‘category’ and’subcategory’. Then, in tooltip macros, we may select macros for both attributes’ attribute forms. Take a look at the screenshot. Attribute_forms