Skip to main content

Chart Tooltips

Tooltips are one of the best interactive features to avoid clutter. Walk your mouse over an element to get instant information in a popup for that element alone. With no need to show that info permanently, for most visible elements.

Chart tooltips make possible advanced understanding of a series point, without even showing the axes and the legend. The chart title alone and the tooltips should be enough, in most cases, to understand the info displayed by a series point and put it into context.

Tooltip Implementations

The information displayed by tooltips by default is usually laconic and different from one chart application to another. In most cases, they use:

  1. reserved and specific macro keywords for some variables (such as #VARX or #SERIESNAME);
  2. specific format strings;
  3. specific formatting functions, for more complex and advanced dynamic functionality;
  4. custom styling fonts, colors, backgrounds.

We’ve spent many hours getting this right for you, and filled our standard chart type tooltips with meaningful and rich data. We’ll demo this on the Metallika for Microsoft templates, which show a title and have the tooltips by default ON. Tooltips may be the only truly interactive feature of an ASP.NET control, which otherwise renders the whole chart as a static image on the server side.  Of course, you can make other elements visible – such as the axes, legend, axes titles and labels etc – but try to determine here if you cannot use just the tooltip, to get what you need.

Tooltip Display Info

Some interesting pointers about the information we thought is important to display in a tooltip:

  • They should all start with the series name, regardless of the single/multi-series chart, and legend’s visibility. If the legend is OFF, and in a multi-series, that’s a required information. But even in single-series, with the legend ON, you avoid rolling your eyes back and forth to the legend, to associate colors and symbols.
  • They should all show not just the information, but the kind of that data. We show “Country: US” instead of just “US”. Or “Quantity: 34” instead of just the value “34”. For OHLC or Candlestick charts, we clearly identify by a label the Open-Close and High-Low values.
  • We properly format our data, as Currency, 2-digit percentage values, proper Date format.
  • We always show multi-line tooltips. They are now supported by all modern browsers and they breaking long lines into separated by category info.
  • We try to keep it consistent, between similar chart types, and from a chart application to another. All single-series bar charts will obviously display the same information. Switching from Microsoft ASP.NET Charts to Highcharts or another app will also keep the same info and format in the tooltips.

Samples

Walk your mouse now over the charts below, and try to put the information in the right context. Tell us what you think (comments are always welcome).