📊
Public Data Visualization Guide
  • Data visualization standards for SF.gov
  • Why do this?
    • Now you try!
  • Thoughtful design
  • Accessibility
    • Some basics
    • Color
    • Formatting Data Visualizations
    • Formatting tables
    • Alt Text
  • Mobile view
  • More resources
  • Analyst checklist
  • Using the Power BI template: A step-by-step guide
  • Data management
  • Webpage content for data pages
  • Publishing Power BI dashboards to SF.gov
  • Resources and links
  • Gallery of dashboard transformations
Powered by GitBook
On this page
  • Use standard fonts and sizes.
  • Create meaningful chart & axis titles.
  • Use data labels sparingly to avoid cluttering your chart.
  • Avoid showing decimals and being overly precise.
  • Minimize/eliminate movement in any visuals that won’t be accessible to a screen reader.
  • No interactions should be required to access key information.
  • Don’t rely on tooltips for important information.
  • Turn off all unnecessary interactions.

Was this helpful?

Export as PDF
  1. Accessibility

Formatting Data Visualizations

When formatting your visuals, consistency and accessibility is critical.

PreviousColorNextFormatting tables

Last updated 3 years ago

Was this helpful?

Much of the content below was taken directly from these two resources:

  1. Meagan Longoria's

  2. Microsoft article on how to

Use standard fonts and sizes.

No font should be smaller than 12 pt.

Power BI tip: All fonts are built into

  • Use Segoe Semibold size 15 for visual titles.

  • Segoe Semibold size 14 for axis titles.

  • Segoe UI size 13 for all other text. All font must be size 12 or larger.

  • Segoe UI Bold 35 for cards

Create meaningful chart & axis titles.

Titles on each graph or data visualization are important accessibility features that orient a user. Add descriptive, purposeful titles to charts. Avoid using acronyms or jargon in your report titles.

We recommend using x-axis titles on all your charts. Make the title descriptive. For instance, if your chart is displaying data over time, try to describe how the data is mapped to a date. So the axis title may not be “Date”, but rather, “Date of incident”, “Date test was collected”, etc.

The visual title of your chart should be descriptive enough that a y-axis (value axis) title is not needed. However, if you do need the additional detail of a y-axis, add one.

Power BI tip: You can make a that concatenates your title text and a specific value. For example, this COVID-19 cases chart dynamically tells you the current number of new cases

Use data labels sparingly to avoid cluttering your chart.

Beware of over-using data labels and cluttering your graph. A data label should not obscure the chart's visuals from the reader.

If labels are obscuring the visual, it may be best to not have labels and instead rely on the table below to reveal the data points.

Avoid showing decimals and being overly precise.

Being overly precise can obscure trends. Being overly precise might mean showing unnecessary decimals or showing numbers in the millions/billions that really should be rounded. There shouldn’t be decimals shown on your public dashboards in most cases.

There are exceptions to this. For instance, if you are showing percentages and want to show that a certain percentage isn’t 0, but rather .3 or .4, that may be fine. But in those cases, only one decimal should be used.

Minimize/eliminate movement in any visuals that won’t be accessible to a screen reader.

Avoid any movement or video/audio that automatically plays.

No interactions should be required to access key information.

If critical information is only accessible through an interaction or click, re-organize the dashboard. Rearrange your visuals so they are pre-filtered to make the important conclusion more obvious. Clicking should not be needed for any key information.

Test any interactions to ensure everything works with a mouse and with a keyboard.

Don’t rely on tooltips for important information.

Tooltips are not accessible to keyboard users in Power BI. In addition, users with motor issues may have difficulties accessing them.

Only add tooltips to charts to reinforce information that is also accessible in another way.

Turn off all unnecessary interactions.

Only keep interactions (where one visual filters another) if it is helpful and clear. Most interactions add unnecessary complexity and should be turned off.

Typically, you want to be able to select a point from a graph and have the table filter. And likewise, you want to be able to select a cell in a table to see the point highlighted in the graph.

Power BI tip: Turn down the density of labels:

Power BI tip: In Power BI, beware of with auto-play. This is also relevant for mapping because some mapping visuals (like Mapbox) auto-zoom by default. Turn this off. Set the zoom, latitude, and longitude according to the instructions in .

Power BI tip: In Power BI, we allow the visual to filter the table, but we turn off the connection from the table to the visual. .

📌
📌
📌
Power BI Accessibility Checklist
Design Power BI reports for accessibility
the template.
visual’s title dynamic by creating a measure
📌
play axis
the Power BI template file
📌
Learn more about interactions in Power BI
Screenshot of a visual with dynamic title reading "7-day rolling average new cases per day, currently 24 new cases". The title will dynamically update as the rolling average changes.
Screen shot showing the Power BI formatting pane, data labels section. Screenshot highlights how to turn down label density.