Chart Types

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