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:
- Y-axis title: Chart axis label that identifies the values or measurements of the y-axis.
- Y-axis values: Data values, frequencies, or percentages shown on the y-axis .
- 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.
- Grid: Horizontal lined that span the entire width of the chart area. They serve as visual guides to better evaluate the bar data values.
- X-axis values: Categories labels of the variable are shown along the horizontal, or x-axis.
- X-axis title: Chart axis label that identifies the date groups on the x-axis.
- 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:
- Y-axis title: Chart axis label that identifies the values or measurements of the y-axis.
- Y-axis values: Data values, frequencies, or percentages shown on the y-axis.
- 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.
- 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.
- X-axis values: Time scale.
- X-axis title: Chart axis label that identifies the date groups on the x-axis.
- 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 Blue Unclassed
Assign your colors in a meaningful way.
Use sequential colors to differentiate unordered categories.
Use graphs where data points are located immediately next to each other so its meaning is easy to read.
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)
Analogous Palette (fewer hues more shades)
Use categorical palettes for complex line charts with multiple overlapping categories.
Overcomplicate bar charts. Humans can only take in 7-8 pieces of data at a time.
Use categorical colors to clearly differentiate stacked categories.
Use categorical colors on sequential or ordered data as it makes the labels hard to understand at a glance.
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.
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 deficiencies, 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
Use Semantic colors to visualize the performance of the metric