Line chart
Description
A line chart is a type of chart that displays the evolution of one or several numeric variables over a continuous interval or time period. Typically, the x-axis is used for a timescale or a sequence of intervals, while the y-axis reports values across that progression.
When to use
Line charts are common and effective for showing how the value of something changes over time or comparing how several things change over time relative to each other by plotting them on the same chart using different colored lines.
Dos and donts
Choose an appropriate y-axis scale (ideally, the height of the line occupies roughly two-thirds of the chart area).
Don’t plot too many lines (four maximum).
Use solid and right weight line (thick enough to stand out against the gridline but still think enough to show the twists and turns of the line).
Use clearly differentiated colour for the different categories.
Label the lines directly (use a legend only when space is tight).
Don’t use dual axes to compare the evolution of different variables (multiple lines).
Tools available
MS Office Power BI Illustrator R D3.js Python
Area chart
Description
An area chart, like a line chart, displays the evolution of numeric variables over a continuous period of time. However, in an area chart, the area between the line and x-axis is filled with colour or texture.
Area charts are created by plotting data points on a Cartesian coordinate grid (typically, timescale is on the x-axis, with values on the y-axis), and then the points are connected with a line, and the area below is filled.
When to use
Area charts are useful for showing trending quantities, or even comparing multiple quantities against each other (also known as grouped or overlapping area charts).
Dos and donts
Use zero baseline for the y-axis.
Use the same colour for the line and the fill.
Don’t use an area chart for showing fine differences between values.
Tools available
MS Office Power BI Illustrator R D3.js Python
Stacked area chart
Description
As a variation of a simple area chart, a stacked area chart displays the changes of value of multiple data series over a period of time. The values of each data series are plotted on top of each other, which allows tracking not only the evolution of total value but also the breakdown of that total by groups.
When to use
Stacked area charts are useful for comparing multiple related variables changing over an interval. We can get a general idea of how each variable compares to the other in their contributions to the total. However, stack area charts should be used carefully as people could be confused with overlapping (or grouped) area charts in which all data series share a common baseline.
Dos and donts
Use zero baseline for the y-axis.
Use contrasting colours for each individual category.
Don’t apply opacity on colours for the filled areas.
Don’t use a stacked area chart to show fine differences between values.
Order the values in a way that tells the best story.
Tools available
MS Office Power BI Illustrator R D3.js Python
Streamgraph
Description
A streamgraph is a variation of a stacked area chart. Instead of displaying values on top of a fixed, straight baseline at the bottom of the stack, the values of the streamgraph are displaced around a central baseline. This results in a flowing, organic-shaped “stream” displaying the change over time.
In a streamgraph, the horizontal axis is used for the timescale, while the height of each individual stream shape indicates the value of each category. Different colour shades are used for representing different categories. This makes streamgraphs visually appealing and more engaging to look at.
When to use
Streamgraphs are useful for visualizing large datasets to show the quantity change within categories over time. It can help identify trends and patterns. Stream graphs are best used in an interactive form rather than static graphs.
Dos and donts
Use contrasting colours for each individual category.
Don’t apply opacity on colours for the filled areas.
- Don’t use a streamgraph to show fine differences between values.
- Make it interactive if possible.
Tools available
R D3.js Python
Line column chart
Description
A line column chart is a type of visualization that combines both line and column charts together, using dual axes displayed on the left and right sides of the chart. It allows us to show the relationship of two variables with different magnitudes and scales.
When to use
Line column charts can be useful when showing the relationship over time between an amount (column) and a rate (line). Be careful when using, because if used incorrectly, it can be misleading.
Dos and donts
Start at zero baseline for y-axis that that shows the amount (column).
Don’t include too many variables.
Place primary y-axis on the left.
- Use contrasting colours to clarify which data series belongs to which axis.
- Don’t use it to compare heights, as the axes could be on different scales.
Tools available
MS Office Power BI Illustrator R D3.js Python
Slope chart
Description
A slope chart looks like a line chart, but unlike the line chart, it has only two data points for each line. The change between two data points can be easily identified with connected lines (slope up means increase, slope down means decrease).
When to use
Slope charts can be used to show change in a ‘before and after’ story by comparing their values at different points in time. It is a great way to show change or difference when there are only two data points. It works well with both continuous data and categorical data.
Dos and donts
Don’t plot too many data series, especially if there are many similar values and slopes.
Use consistent colours throughout the chart, using accent colours to highlight meaningful data points.
Use direct labelling instead of a separate legend.
Tools available
MS Office Power BI Illustrator R Python
Dot plot
Description
A dot plot is a type of graph in which the dots are connected to show changes or differences. It’s an alternative to the grouped bar chart or slope chart.
When to use
Dot plot can be used for displaying changes between two points in time, two conditions, or differences between two groups.
Dos and donts
Use a horizontal dot plot if the category name is long.