Intro

You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.

Different Harvey Ball charts
Different Harvey Ball charts

Usage

The Harvey Ball micro chart can be embedded into a table, list, tile,or header.

Responsiveness

The Harvey Ball micro chart is fully responsive. The size adjusts dynamically based on the dimensions of the parent container. In addition, there are four fixed sizes: L, M, S and XS. Each fixed size is a snapshot of the fully responsive micro chart for specific dimensions.

Harvey Ball micro chart - Size L
Harvey Ball micro chart - Size L
Harvey Ball micro chart - Size M
Harvey Ball micro chart - Size M
Harvey Ball micro chart - Size S
Harvey Ball micro chart - Size S
Harvey Ball micro chart - Size XS
Harvey Ball micro chart - Size XS

You can use size XS to embed the Harvey Ball micro chart in the cells of a grid tableanalytical table, or tree table (also in condensed mode). Left-align the Harvey Ball micro chart in the table cell.

Harvey Ball micro chart in size XS in a grid table
Harvey Ball micro chart in size XS in a grid table

Maximum and Minimum Sizes

The Harvey Ball micro chart can have the following dimensions:

Width Height
Maximum 320 px 94 px
Minimum 64 px 18 px

If the chart height is less than 56 px, only the slice label is visible.

Components

Labels

If the container scales in height, the size of the micro chart adapts to the available vertical space.

  • If the container height increases, the size of the micro chart increases (assuming the available width is suffcient).
  • If the container height decreases, the size of the micro chart is reduced again.

If the micro chart is smaller than size S, only the chart slice and slice label are visible. If there is not enough space for the label, it is not shown.

Harvey Ball micro chart - components
Harvey Ball micro chart - components

Resources

Elements and Controls

Implementation