Data Storytelling (2024)

Use this data visualization style guide to create a uniform look and feel to all UTSA charts and graphs. This page contains guidelines that are in line with data visualization best practices and proven design principles. It also eliminates the burden of design and color decisions when creating charts.

• ​Keep it simple - less is more! Data displays should be clear, concise, and clean.
• Use bright colors sparingly and to highlight unique or interesting data.
• Use the five-second rule: Within 5 seconds of viewing the dashboard, the audience should be able to take away at least one piece of relevant information.

UTSA uses the font Segoe UI and the font color black (#000000). When possible, this font should be used to create charts. Good chart typography creates a hierarchy among elements and guides the reader through the visual.

Typography reminders:

• Use the whole number and comma formats for numericaldata. Use the currency symbol for financial data.​​​​ Be consistent with decimal places and number formatting throughout.​
• Right-align all numerical data, including percentages and financial data.
• Left-alignment for titles and legends is preferred. However, other alignments are okay for some graphs. Keep text-alignment consistent throughout.
• Do not use units (e.g. Use 4,000, not 4K)
• Avoid abbreviations (use"Total"instead of "Ttl") if possible, and do not usesymbols (e.g. use "Number" or "No.", not"#"). If using an abbreviation, make sure it is grammatically correct.

There are eight main colors to use for graphics and dashboards. Navy, orange, yellow, light blue, light gray, and dark gray form the core colors. Green/teal and pink should be used sparingly, as these colors should be considered for highlighting purposes (such as drawing attention to a certain category or indicating a trend line).

Rules for using color

• Use only the colors in this Style Guide, including gradations.
• Use bright colors sparingly and to highlight unique or interesting data.
• When displaying data by gender, do not use blue for males or pink for females. Instead, choose a color combination like navy and orange, or another combination of our main graphic colors.
• Refrain from using more than six different colors on a graph. The only exception to this rule are some race/ethnicity graphs.

Color Combinations

Main Graphic Colors

Shades of Main Colors

One Group

Use either navy or orange when graphing one data category.

Two Groups

Categorical Data

Sequential Data

Three Groups

Categorical Data

Sequential Data

The following examples use the styles and colors to illustrate common chart types.

Graph Guidelines

• ​Do not put time on the y-axis.
• Avoid 3D charts.
• Avoid more than three to five categories on a stacked bar or column chart, or a stacked 100% column chart. The categories must be easy to see.
• ​Avoid using pie and donut charts. If you use a pie or donut chart, do not include more than three categories per pie or donut chart. Never use multiple pie or donut charts to compare data.
• Use data labels sparingly so as not to clutter the graph.
• Do not put units or multipliers on the axes or data labels. Put them in the title if necessary.
• X-axis labels must be horizontally aligned. No slanted or diagonal labels.

Bar and Column Charts

• The y-axis should start at zero in most cases.
• The width of the bars should be about twice the width of the space between the bars.
• If you are showing fewer than 10 bars, consider eliminating the horizontal gridlines and y-axis line and directly labeling the data points.

Bar Chart

• Eight categories and one color. The categories are placed on the y-axis instead of the legend.
• No legend needed because there is only one color and all categories are clearly visible on axis.
• This style is preferred to display race/ethnicity data.

Grouped Column Chart

• Legend is left-aligned. Use this alignment if the legend is not fully visible in other variations.
• Whenever possible, limit the categories on your graph to six or less.

• Left-aligned row header and center-aligned column headers on a white (#ffffff) background.
• All black (#000000), Segoe UI text, and values. Row, column, and totals are bolded.
• Font size of at least 10 for all matrix or table text and values.
• Alternating color bands of gray (#efefef) and white.
• Horizontal and vertical gridlines and outline turned on, line color is #e7e7e7, line thickness is 2.
• All values (numeric, percentage, monetary) must be right-aligned.
• No frame around the matrix or table.
• If possible, size the matrix or table so that users do not need to scroll up or down or side-to-side to see data.

Matrix Examples