Configure Tooltips

A tooltip is a small, floating text box displayed when you hover the mouse cursor over a particular data plot. Depending on the type of chart is belongs to, a tooltip can display different types of contextual information about data plots. For instance, in a single series chart, it can show the name and the data value of a particular plot.

Here is a quick reference on how you can implement tooltips in your project:

Default Tooltip

The default tooltip is the ones displayed by charts automatically, without any custom setting. You can disable these if you want. The default tooltips display different types of contextual information about the data plot, depending on the type of chart concerned. For instance, a default tooltip in a pie/doughnut chart can display the name and percentage value of a particular data plot.

Let us suppose you build a line graph to showcase the names and the amount of carbon dioxide emitted while producing different types of grocery items. Here, by default, each tooltip will display the name of the product, and the corresponding amount of carbon dioxide. You can, however, customize this text using attributes.

To know more about this feature, click here.

Tooltip using Macros

In FusionCharts, you can configure tooltips to dynamically include supplementary information about the data plotted on a chart. If you update any of the data values, its corresponding tooltip will immediately reflect it. Using macros automates the inclusion of this information, which means you no longer need to manually customize the text of each and every tooltip.

Let us suppose you build a line graph to showcase the names and the amount of carbon dioxide emitted while producing different types of grocery items. If you use macros to generate the tooltip texts, each tooltip will display the name of the product, and the corresponding amount of carbon dioxide emitted. If you modify one or more data values, the macros will automatically update the tooltips to display the modified data.

To know more about this feature, click here.

Consolidated Tooltip

In FusionCharts, a cross line represents a vertical line/area that the viewer can use as a quick reference for data plots. When the viewer hovers the mouse pointer over the canvas, a line/area appears highlighting the data plots along with the information in a tooltip. The tooltip that appears has all the information required, for example, data values, labels of each data plot and also the color of the data plots. A consolidated tooltip appears with the cross line in multi-series charts.

For instance, consider that you are building a multi-series spline chart about the reach of social media platforms among the youth. If you plot the years on the X-axis and the percentage of reach of the platforms among the youth along the Y-axis, you can use separate cross lines to connect the data plots for each year. If the user hovers over one of the plots along a cross line, the tooltip that appears will display the values of all the plots on that cross line.

Images in Tooltip

In FusionCharts, you can configure tooltips to display images along with data values. This makes tooltips better looking, and also makes it possible for viewers to quickly understand the data displayed, without even looking at the legend or any of the axes.

Let us suppose you build a line graph to showcase the names and the amount of carbon dioxide emitted while producing different types of grocery items. If you insert images of the products within the tooltips, viewers will be able to quickly identify which product information they are looking at. The tooltips will also look much better.

HTML Formatting

In FusionCharts, you can use HTML formatting in the tooltips to display additional information regarding the data plots. This can make it easier for viewers to comprehend the chart better.

Let us suppose you are building a chart to visualize the relation between the local temperature and the sales figures of beer and ice cream in a particular region. You can include the sales figures and local temperature for every data plot into the tooltips in the form of HTML formatted tables. That way, the viewer can simply hover the mouse pointer over a particular plot to see the underlying data instantly.

To know more about this feature, click here.

Chart in a Tooltip

You can also opt to add charts in the tooltip. For instance, while showing the weekly cumulative report card of the students for different subjects you can add another chart in the tooltip to display their score for individual weeks.

Plot Color in Tooltext

In FusionCharts, you can apply the color of a data plot to the text displayed in its corresponding tooltip. This helps viewers quickly identify that a tooltip text belongs to a particular data plot. This is especially useful when there are a large number of data plots in a chart.

Let us suppose you have several sections in a pie chart, and a few of those cover little areas compared to the others. Applying the plot color to the tooltip texts of those sections can make them easier to understand for viewers.

To know more about this feature, click here.