Skip to main content

Shape Chart Tooltips

Shape charts displays data as value or percentages of a whole. They are typically used to show proportional comparisons between different values in a set. We call shape charts the pie/doughnut and pyramid/funnel 2D/3D charts.

Format Expression

One of the best ways to show contextual information on a chart’s elements, without clutter, is through tooltips (or balloons). Whenever you move the mouse over a data series point, a small info popup shows information about the element. For shape charts in particular, most complete and sufficient information would be the slice name, its value and the slice percentage of the whole. We consolidated this summary info throughout all our shape charts, for tooltips looking like “name: value (percent%)“.

When tooltips are enabled, chart applications define their display format in one of two ways:

  1. Through a format expression, with application-specific predefined macro variables.
  2. Through a format function, in which you may use more complex processing to achieve your end result.

Application Implementation

Here is what each featured application relies upon:

Microsoft series.ToolTip – format expression, with “#LEGENDTEXT: #VALY (#PERCENT)” for tooltips
Highcharts tooltip.formatter – format expression or function, with code such as “return this.point.name;”
FusionCharts plotToolText – format expression, with “$label: $value ($percentValue)” for tooltips
AnyChart tooltip.titleFormat – format expression or function, with “{%Name}: {%Value} ({%YPercentOfTotal}%)” for tooltips (tooltip.format is set empty)
amCharts balloonText – format expression, with “[[title]]: [[value]] ([[percents]]%)” for tooltips

balloonFunction – format function

Syncfusion toolTipInitialize – event function, with specific expression passed into e.data.currentText
ShieldUI tooltipSettings.customPointText – format expression or function (tooltipSettings.customHeaderText is set empty)
Google Charts role “tooltip” data columns
CanvasJS toolTip.content – format expression

toolTip.contentFormatter – format function

jqPlot highlighter.tooltipContentEditor – format function

Live Examples

And here are some samples. Move your mouse over a slice: in most cases, a tooltip with the same generic expression presented before will appear. Click on the left-bottom corner hyperlink to go back where the whole template for this chart has been defined. Remove the eventual application filter, to show charts for all other chart apps.