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:

Microsoftseries.ToolTip – format expression, with “#LEGENDTEXT: #VALY (#PERCENT)” for tooltips
Highchartstooltip.formatter – format expression or function, with code such as “return;”
FusionChartsplotToolText – format expression, with “$label: $value ($percentValue)” for tooltips
AnyCharttooltip.titleFormat – format expression or function, with “{%Name}: {%Value} ({%YPercentOfTotal}%)” for tooltips (tooltip.format is set empty)
amChartsballoonText – format expression, with “[[title]]: [[value]] ([[percents]]%)” for tooltips

balloonFunction – format function

SyncfusiontoolTipInitialize – event function, with specific expression passed into
ShieldUItooltipSettings.customPointText – format expression or function (tooltipSettings.customHeaderText is set empty)
Google Chartsrole “tooltip” data columns
CanvasJStoolTip.content – format expression

toolTip.contentFormatter – format function

jqPlothighlighter.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.

Categories: Showcase

Cristi Scutaru

Experienced software architect and developer, founder of XtractPro Software, creator of and Focused lately on easy data extraction, visual data representation, and productivity tools.