Style

Every chart's components are created to function together seamlessly. Each element serves a crucial purpose in conveying data.

Chart anatomy

Explore the bar chart as an example

The structure of a chart or graph consists of various parts, known as chart anatomy. These elements are crucial in comprehending and analyzing the data displayed in the chart. An illustration of a simple chart component with bars is provided below:

Data Vis Bar Chart with anatomy numbering
  1. Y-axis title: Chart axis label that identifies the values or measurements of the y-axis.
  2. Y-axis values: Data values, frequencies, or percentages shown on the y-axis .
  3. Bar or columns: Each bar represents the frequency or percentage in each category. The bars are of equal width and stretch vertically to the height that represents the value of the data they represent. The bars do not touch.
  4. Grid: Horizontal lined that span the entire width of the chart area. They serve as visual guides to better evaluate the bar data values.
  5. X-axis values: Categories labels of the variable are shown along the horizontal, or x-axis.
  6. X-axis title: Chart axis label that identifies the date groups on the x-axis.
  7. Legend: Legends identify the meaning of various elements in a data visualization and can be used as an alternative to labeling data directly. Legends are commonly used with data visualizations when there is more than one color or line type being used.

Line chart

An illustration of a complex chart called a line chart, which is a type of time series chart variation, is provided below:

Data Vis Line Chart with anatomy numbering
  1. Y-axis title: Chart axis label that identifies the values or measurements of the y-axis.
  2. Y-axis values: Data values, frequencies, or percentages shown on the y-axis.
  3. Data series: Line representing data points at successive intervals of time; each point on the chart corresponds to both a time and a quantity being measured.
  4. Grid: Horizontal or vertical lines that span the width of the chart area; the grid lines serve as vbisual guides to evaluate the series data values.
  5. X-axis values: Time scale.
  6. X-axis title: Chart axis label that identifies the date groups on the x-axis.
  7. Legend: Displays a color swatch, series name, and various values associated with a selected data point, including date and time; can be used as an alternate method of labeling data directly.

Color

Sequential colors

Sequential palettes use a single color in various saturations or in a gradient. Representing continuous data using one color helps viewers quickly grasp that they're looking at increases or decreases in a single metric, such as unemployment or infection rates over time.

Sequential Blue Classed

sequential color swatches from low (light blue) to high (dark blue)

Sequential Blue Unclassed

sequential color gradient from low (light blue) to high (dark blue)
A gauge visualization that utilizes color to represent intensity
Do

Assign your colors in a meaningful way.

A bar chart that uses sequential colors to represent each month of the year
Don’t

Use sequential colors to differentiate unordered categories.

Do

Use graphs where data points are located immediately next to each other so its meaning is easy to read.

Don’t

Use sequential colors where data points are too far from one another to have meaning.

Keep your audience in mind. Humans perceive colors with higher contrast or visual weight as more important. Assign the darker colors in your sequence to what you want your audience to perceive as more important and lighter colors to less important values or ranges.

Depending on what you want to communicate, dark values can also be seen as 'bad' when placed in contrast to lighter values. This makes reading your visualization ‘at a glance’ especially easy for an audience.

Categorical colors

Qualitative or categorical palettes have each color distinct from the others. This type of palette is ideal for visualizations displaying categorical values such as status, priority, and department.

Complimentary Palette (more hues fewer shades)

sequential color palette showing varying hues

Analogous Palette (fewer hues more shades)

sequential color palette showing varying shades, but still varying some hues
chart showing clear color use for overlapping data series
Do

Use categorical palettes for complex line charts with multiple overlapping categories.

bar chart with stacked data that appears noisy and difficult to read
Don’t

Overcomplicate bar charts. Humans can only take in 7-8 pieces of data at a time.

a stacked bar chart that is using categorical colors to clearly differentiate stacked data sets
Do

Use categorical colors to clearly differentiate stacked categories.

a gauge visualization that is using categorical colors and struggles to show intensity in a linear way
Don’t

Use categorical colors on sequential or ordered data as it makes the labels hard to understand at a glance.

A bubble chart showing categorical colors being used to differentiate and group data
Do

Use categorical colors where multiple uncategorized data points are separated over time series.

Use categorical colors to see trends in overlaying data density.

It can be helpful to highlight correlations with multiple unordered categories that exist in close proximity.

This allows viewers to assess the data and still make connective links. For ordered or sequential data, such as that found in heatmaps, use a sequential palette.

donut chart showing appropriate use of categorical colors
Do

Use categorical colors to visualize the composition or comparison of data.

Semantic colors

You may be inclined to use favorite color combinations like traffic light colors: red, yellow and green. These colors have universal meaning and are easy to understand. However, they can also be easy to misinterpret if used badly, so be mindful to use them only if they serve your audience and your communication.

Traffic light colors are also notorious for being hard to read for people with color difficiencies, specifically red-green color blindness (Deuteranopia), which can roughly equate to nearly 12% of your audience. Instead of a semantic palette, consider a sequential scale or attaching meaning to categorical colors to make your dashboard or visualization unique while still telling an effective story.

Semantic/alert colors

swatches for green/amber/red, similar to the semantic colors used for a stop-light or traffic signal on roads
a gauge visualization showing the correct use of semantic colors to indicate performance/load
Do

Use Semantic colors to visualize the performance of the metric