Tooltip Customization

Introduction

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.

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

Markers

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.

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:

Country

Category

Profit Margin

Sales

Metric Names

Metric Values

Attribute Values

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

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.