Chart types

This guideline offers direction for choosing charts that effectively transform raw data into meaningful insights, enabling users to identify trends, spot anomalies, and compare metrics.

Purpose Chart type Chart tooltip Guidelines

Purpose

Identifying trends: how metrics change over time.
Identifying anomalies: deviations from expected patterns.
Comparison: Similarities and differences between metrics.

According to Nielsen Norman Group , researchers have found that bar charts, line charts, and scatter plots are easiest to understand. Other chart types require users to visually assess angle, area, or volume to understand the data. Choose the most suitable chart based on the content, complexity, and user goals.

Chart	Example
Bar chart (Column chart) Versatile for comparisons and distributions, especially when categories are clearly defined. Example: Analytics > Content > Navigation depth
Paired bar chart Ideal for directly comparing two related data sets (e.g., before and after). Example: Analytics > Behavior > Funnels > Funnel analysis (Comparison tab)
Horizontal bar chart Preferable when category labels are lengthy. Example: Analytics > Content > Most popular pages
Line chart Best for illustrating trends and changes over continuous time periods. Example: DCI > My sites
Bubble chart Reveal correlations and patterns between two to four numeric variables. Example: SEO > Keyword monitoring > Search engine visibility
Pie chart Effectively communicate proportions or percentages of a whole. Example: Analytics > Visitor > Countries
Matrix / Heatmap Useful for large, complex datasets where patterns and relationships need to be visually highlighted. Example: Analytics > Visitor > Screen resolutions
Flat gauge Perfect for displaying progress towards targets or goals. It's useful where space may be limited. Example:Accessibility > Accessibility overview
Polar gauge (DCI score gauge) Perfect for displaying progress towards targets or goals., with the circle representing 100% of the goal. Example: DCI dashboard
Rating chart (Scale) Visualizes feedback or difficulty levels. Examples: Accessibility > Issues
Map Essential for showcasing data tied to specific locations. Examples: Analytics > Visitor > Countries
Bubble map variation Adds another dimension to maps by showing the magnitude of values at different locations. Examples: Performance > Performance overview > Page overview > Page performance

Description	Example
A chart tooltip is a message that appears when you hover your cursor over a chart element like a data point, icon, or truncated text. Tooltips provide more detailed information or context for that specific element. Visually links each item in the tooltip list to its corresponding element on the chart using a colored line segment or icon. This makes it easy to connect the tooltip information back to the chart. Example: DCI > Site progress

Description

Example

A chart tooltip is a message that appears when you hover your cursor over a chart element like a data point, icon, or truncated text. Tooltips provide more detailed information or context for that specific element.

Visually links each item in the tooltip list to its corresponding element on the chart using a colored line segment or icon. This makes it easy to connect the tooltip information back to the chart.

Example: DCI > Site progress

Guidelines

Do

Keep charts simple and focused.
Use clear labels and titles.
Size charts appropriately within the page layout.
Use the minimum number of metrics needed to convey the message.
Use subtle gridlines to aid in reading values, but avoid making them overly prominent so they don't compete with the data itself.
When not using a Fancy component, adhere to Fancy's guidelines for color, typography, and spacing.

Don't

Avoid 3D effects.
Avoid technical jargon: use plain language. If technical terms are unavoidable, provide explanations.
Don't use misleading scales (e.g., Y-axis not starting at 0).
Don't clutter charts with unnecessary decorations.

Accessibility

Ensure chart elements have at least a 3:1 color contrast ratio against the white background.
Use unique patterns for each element, or provide a cogwheel icon to toggle patterns on/off.

Explore detailed guidelines for this component: Accessibility Specifications

Writing

Title (card header):

Craft a title that is self-explanatory and instantly communicates the chart's core message. Prioritize brevity without sacrificing meaning.
The title must faithfully represent the data and insights visualized in the chart. Avoid misleading or ambiguous phrasing.

Axes and gridlines

Use descriptive labels that precisely define what is measured on each axis. Include units (e.g., scores, dollars, percentages) and time periods (e.g., days, months, years) when relevant.
Consult the Word list for approved terminology.

Alert Messages:

Prioritize clarity and conciseness.
Focus on the essential information users need to know.