Chart - Donut
A Chart - Donut is used to break down information by displaying the categorization or distribution of data.
Title
Subtitle (optional)
Top text (optional)
-
68% Category 1
-
20% Category 2
-
12% Category 3
Bottom text (optional)
When to use
The Chart - Donut displays data as parts of a whole, allowing viewers to easily compare the sizes of different segments. It is commonly used in sustainability reports to illustrate various metrics, such as:
- Distribution of resources (e.g., energy sources, waste management)
- Breakdown of sustainability initiatives (e.g., investments in different areas)
- Comparison of performance metrics (e.g., emissions by category)
This visualization helps stakeholders quickly grasp the distribution of different elements within a larger context.
How to use
Main considerations when using this component:
- Color. The main digital color palette is available to use within this component. When applicable, select colors that align with the designated section colors for consistency. If section colors are not defined, choose colors that complement the overall look and feel of the page.
- Placement: This component can be used independently, in Layout 66_33 and Layout Columns - 50.
Additional considerations
- Recommended title length: 20 - 30 characters (max. 50)
- Recommended subtitle length: 20 - 30 characters (max. 50)
- Recommended top text length: 75 - 125 characters (max. 200)
- Recommended category and value length: 10 - 30 characters (max. 50)
- Recommended bottom text length: 75 - 125 characters (max. 200)
Example
See this component in use:
Key actions to fight plastic pollution (Chart - Donut in Layout 66_33)
