A Quick Guide
| Chart Type | Usage | Design Guide | Accessibility Requirements |
| Bar Chart | - The distribution of data points within the same category
| - 4px corner radius for top left & right
| For all:- Utilize the defined color palettes and patterns for contrast requirements
- Use hover states using a tooltip or popover and/or contextual labeling showcasing data required
- Follow all labeling requirements ex: title, axis, legend, etc.
|
| Grouped Bar Chart | - Making comparisons across different categories of data
| - 4px corner radius for top left & right
| |
| Stacked Bar Chart | - Used to compare numeric values between levels of a categorical variable
| - 4px corner radius for top left & right 4px spacing between bar sections
|
| Donut Chart | - Illustrates how a total is divided among categories
| - 4px spacing between donut sections
|
| Line Chart | - Use a line chart to show trends or changes over time, to highlight the movement or pattern of data
| - Each color has its assigned stroke, which helps maintain consistency, clarity in the UI, and adds appropriate spacing
- Keep the edge corners rounded
|
| Area Chart | - Use an area chart to show trends and data magnitude over time. The filled area highlights total values.
| - Each color has its assigned stroke, which helps maintain consistency, clarity in the UI, and adds appropriate spacing
- Keep the edge peaks rounded
|
Questions? Challenges?
Contact the Visual Design team on the #ask-vizd channel
Last modified on January 23, 2026
