While discussing a chart during a presentation, you’d probably have to talk at length about each plotted value. The lengthy discussions become particularly unavoidable if you have to cite reasons for declining sales or for an extended period of stagnation. In situations such as this, tooltips come in handy since you can easily display a lot of text on them.

FusionCharts v3.1 allows you to introduce line breaks in tooltip text. So, you can now have a lot of info in the tooltips neatly broken down into multiple lines. This helps in eliminating labels placed right next to the data plots, thereby making the charts litter-free.

Let’s take the half-yearly analysis of a hotel as an example to drive home the point:

2D Column Chart with no tooltips

Cluttered Column Chart with long data labels

2D Column Chart with Tooltips

Neater Column Chart with details delegated to tooltips

How to define custom tooltips with line breaks

Following is the XML for the chart above:


The custom tooltip text is defined with the help of the tooltext attribute. Within the tooltip text you can add {br} wherever you want to insert a line break. Customizing the tool tip is that simple.

Fine Tuning the Tooltip

You can obviously do a great deal of fine tuning with respect to the appearance of tooltips. For instance, you can give it a shadow, glow or blur effect. And, customize the text color, background color and border color too. For more information on all this, visit our online documentation on tooltips here.

This is the penultimate article in the series – “How to get the most out of v3.1”, which began on May 7, 2009. The first article in this series was Exporting Charts as images or PDFs. So, if you are new to this blog we suggest that you go through the previous posts of the series:

In the final post, as we said, we will be exploring the chemistry between FusionCharts and Javascript. Do come back for more.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS