Line Chart

Best Practices

Overview

The primary use of a line chart is to reveal trends or progress over time for a variety of categorical data. Multiple data series can be plotted on the same line chart, which is a particularly useful feature for analyzing and comparing the trends in different datasets. There are three visualization options available for line charts. Click a link to navigate to the examples at the bottom of this page:

Each option accomplishes the same task, but it’s important to select the type that best displays the data set.

Visualization

Illustration of visualization area of line chart

Legend

Interacting with the labels in the legend will highlight or isolate the selected data series. Each data series can be toggled on and off individually, allowing users to view a wide variety of combinations.

Illustration of chart legend
Table

Sorting: Selecting the top row of a column will sort the entire table by the content within the selected column. Selecting the same column multiple times rotates the sorting feature between 3 different states: Descending, Ascending and Off. Only a single column can be sorted at one time.

Source: When referencing information from outside of the current page it is highly recommended that a source link is provided. Source link text should be short and descriptive; it should not be the full URL. Source links are always displayed directly above the Table.

Illustration of chart table

Usage

Line charts are typically used to compare changes and show trends. They reveal patterns, trends, relationships and exceptions in data values that are not readily apparent from a table of values. Time series line charts show how one or more variables vary over a continuous period of time.

Use:

  • When comparing trends
  • When displaying data over time

Don’t Use:

  • When comparing totals
  • When looking at a specific time

Other Guidance

  • Chart Title:  Good titles are invaluable. Your chart title should be long enough so your audience can make sense of the chart. A glance at the title should clearly convey what the chart contains. A good title requires a balance between a short title and one with enough descriptive information to clearly describe the chart.
  • Number of Series Lines:  Too many series lines result in visual clutter and make the chart difficult to interpret. One to four lines with a maximum of six lines is recommended. The Chart Builder will support up to nine different colored lines in a line chart. However, if you have more than six sets of quantitative values consider breaking them into multiple charts.
  • Grid Lines:  In most cases, both horizontal and vertical grid lines should be hidden to reduce chart clutter. Approximate values can be perceived without grid lines.  When the difference in data values is close, horizontal grid lines can be shown to better support data value comparison.
  • Data Source:  The data source makes your graphic more reputable. It also allows those who are interested to dig deeper.
  • Outliers in Series Line Data:  If the data set includes an extreme outlier(s) then the visualization will be difficult to process. If the variation can only be seen on a single bar and the rest are flat then it is recommended to do one of the following: Modify the data set to remove / adjust the outlier issue, split the chart into multiple charts or select a different chart type.
  • Filtering: Filtering options can be set in the Data Import Wizard. To create a filter, select a data column that describes a variable (gender, age group, etc.) and provide a label. This creates a drop-down menu with the possible options for the specified data column. When a site visitor changes the drop-down selection, the chart and data are refreshed to show only the rows of data for the selected label. Note that filters can be applied only to a “Columns and Rows combined” data set, the second option in the data-import screen capture below. See chart example.
  • Social Media Sharing:  The Chart Configuration tool allows you to specify a URL, title, and description for social media posts.  It also supports display of the chart embed code for copying.

Chart Color Palettes

The four chart color palettes
  • Go to Examples
    To experience a "live" chart, go to the examples at the end of this page.

Examples

Chart is an interactive content type. In the examples below, try selecting and deselecting data series in the legends. Also try sorting the tables and hovering over the visualization areas.

Standard Line Chart

Filterable Standard Line Chart

See a sample CSV data file [XLS – 2 KB] with filterable data.

Standard Line Area Chart

Spline Chart

Spline Area Chart

Step Chart

Step Area Chart