Skip to content

Choosing chart types

Charts are powerful component for transforming raw data into meaningful insights. They help users identify trends, spot anomalies, and compare metrics.

PurposeChart typeChart tooltipGuidelines

#Purpose

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

#Chart type

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.

ChartExample

#Bar chart (Column chart)

Versatile for comparisons and distributions, especially when categories are clearly defined.

Example: Analytics > Content > Navigation depth

Bar chart

#Paired bar chart

Ideal for directly comparing two related data sets (e.g., before and after).

Example: Analytics > Behavior > Funnels > Funnel analysis (Comparison tab)

Paired Bar Chart

#Horizontal bar chart

Preferable when category labels are lengthy.

Example: Analytics > Content > Most popular pages

Horizontal Bar Chart

#Line chart

Best for illustrating trends and changes over continuous time periods.

Example: DCI > My sites

Line chart

#Bubble chart

Reveal correlations and patterns between two to four numeric variables.

Example: SEO > Keyword monitoring > Search engine visibility

Bubble chart

#Pie chart

Effectively communicate proportions or percentages of a whole.

Example: Analytics > Visitor > Countries

Pie chart

#Matrix / Heatmap

Useful for large, complex datasets where patterns and relationships need to be visually highlighted.

Example: Analytics > Visitor > Screen resolutions

Matrix chart

#Flat gauge

Perfect for displaying progress towards targets or goals. It's useful where space may be limited.

Example:Accessibility > Accessibility overview

Flat gauge

#Polar gauge (DCI score gauge)


Perfect for displaying progress towards targets or goals., with the circle representing 100% of the goal.


Example: DCI dashboard

Polar gauge

#Rating chart (Scale)

Visualizes feedback or difficulty levels.

Examples: Accessibility > Issues

Rating chart

#Map

Essential for showcasing data tied to specific locations.

Examples: Analytics > Visitor > Countries

Map

#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

Bubble Map

#Chart tooltip

DescriptionExample

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

Chart tooltip

#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.