This environment is not optimized for viewing on small or mobile devices. Please view on a larger browser for the best experience.

If you have any questions, please contact us.

Circular Chart

Circular charts consist of segments that represent each category's contribution to display parts of a whole. You can have up to 6 categories—beyond that, it is hard for the eye to distinguish meaningful differences between sizes of each section.

Types

Pie

Use a pie chart if you need to show the percentage or proportion of a number of categories of data within a larger whole. Each data category is represented by a “slice” of the pie.

Pie Hover Behavior

Isolated Hover

When you want to zoom in on a single category, an isolated tooltip allows you to feature more data points for a single category. The other categories fade into the background on hover in order to focus attention on the single category.

Unselected Slices (not hovered)
opacity: 30%

Donut

A donut chart is a variation of a pie chart with an empty center that can display a key metric. If the metric goes beyond seven characters, use an abbreviation inside the donut and list the full amount in the legend label.

Donut Hover Behavior

Isolated Hover

When you want to zoom in on a single category, an isolated tooltip allows you to feature more data points for a single category. The other categories fade into the background on hover in order to focus attention on the single category.

Unselected Slices (not hovered)
opacity: 30%

Semi-circle

A semicircle donut chart can be used to show progress toward a goal.

Semi-circle Hover Behavior

Isolated Hover

When you want to zoom in on a single category, an isolated tooltip allows you to feature more data points for a single category. The other categories fade into the background on hover in order to focus attention on the single category.

Unselected Slices (not hovered)
opacity: 30%

Specifications

Anatomy
1) Legend Title
font-face: Helvetica Now Text
font-weight: 700
font-size: 14px
line-height: 16px
2) Legend Chip
See Global Elements page for specifications
3) Legend Value
See Global Elements page for specifications
4) Chart Segment
border-width: 24px (for donut chart only)
5) Segment Divider
border: 1px solid
color: same as background color
6) Total Value*
font-face: Helvetica Now Display
font-weight: 300
font-size: 30px
line-height: 32px
*Excluded for pie chart
7) Value Label*
font-face: Helvetica Now Text
font-weight: 400
font-size: 14px
line-height: 16px
*Excluded for pie chart
Size & Spacing
Small Size Recommendations
Legend should precede chart in smaller viewports.