Graphs
Our graphs provide beautiful, simple, and accessible ways to understand sets of data.
Keep it simple
Progressive disclosure is key—ensure you are using data visualization as a tool to aid in understanding, not to overwhelm users with too much information all at once.
Tell a story
Focus on what you want to communicate and who you’re communicating to. Understanding data is much easier when there is a human narrative. Think about how you would tell the story in a sentence.
Scale thoughtfully
Our charts scale seamlessly for all screen sizes and users. Use designated colors, interactive states, and scaling behaviors to ensure they are simple and accessible in all contexts.
Single data sets
We use our primary blue when visualizing a single value, such as progress bars, or a single data set, like line graphs, bar charts, or area charts.
Part-to-whole data sets
We use shades of blue, and teal when needed, to represent part-to-whole relationships. This approach keeps the focus on a single, neutral color family, avoiding the use of hues like green and red that may carry specific meanings in other contexts.
Titles
Titles are critical for describing the graph and telling its story. They can summarize the type of data and its time period in a sentence, state the category in a few words and let controls dictate the time period, or highlight the takeaway as a total. You can also utilize subtitles to describe the graph title or tell the story in human language.
Controls
Controls can change time period, type of data, or amount of data shown on the graph. They can be tabs, quick filters or dropdowns that are either left aligned or right aligned depending on your layout and use case.
Axis
The X and Y axes anchor the user, helping them compare data points consistently across graphs. Use clear, concise intervals that avoid overcrowding. For instance, even if the chart covers a full year with daily data, it’s unnecessary to display all 365 days on the X-axis. Ensure labels have at least 16px of space between them and include key anchor points. For example, start the Y-axis at 0 for accurate proportions and mark significant time points on the X-axis, like financial quarters or days of the week. Users can interact with the graph to view specific data points via tooltips between labels.
Interactivity is crucial in maintaining our principles of simplicity and progressive disclosure. Graphs and charts should be simple enough to be understood at-a-glance. Progressive disclosure allows users to easily find the details they need by interacting with specific parts of the graph.
Small screen
The size and number of bars in a bar chart can affect its clarity and meaning when the chart becomes too complex. If bars are narrower than 12px with less than 8px of padding, the chart starts to resemble an area chart, making the bars difficult to read. Aim to keep bars between 12px and 16px wide, with at least 8px of padding between them for optimal readability.
Medium and Large screen
On medium and large screens, the increased real estate allows us to expand the X-axis to display more data in most graphs, often extending the time period and adding more bars in bar charts. However, if consistency in the time period across screen sizes is crucial for the user, you can maintain the same time period and instead adjust the bar width, spacing, and graph inset. On larger screens, bars can widen from 12px to 24px, with at least 8px of padding between them.
