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. Click the link to navigate to the example at the bottom of this page:

(If you need a mix of line styles — for example, a dashed line for one data series and solid lines for others — use a combo chart.)

Visualization

Example of Line chart with six data sources from January to May 2017 created in the WCMS

  • Go to Examples
    To experience a "live" chart, go to the examples at the end of this page.
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.

Example legend for a chart not shown containing six different types of data found on chart
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 2 different states: Descending and Ascending. 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 information can be added to the “Description” box under the “General” section of the “Configure” tab.

Example Data table for chart not shown containing six types of data across six dates in the year 2016

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.

Chart Color Palettes

Examples of Color Palettes that can be selected for Charts in WCMS

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

Note that the chart below demonstrates the chart animation feature. Refresh your web page to see it again. (This option is set in the admin tool’s Visual panel.)  Note also that the line for Data 4 is dashed while the other lines are solid.  In the Data Series panel you can set a line type for each data series. For information on setting Data Series option, see “Building in the WCMS.”  See a sample CSV data file [XLS – 250 B] .

Standard Line Chart with Region Applied

The Regions feature allows you to highlight and label one or more periods of time in a time-based chart. This capability is particularly helpful for highlighting incubation periods for diseases, etc.  (Configuration notes: The X axis, or Y axis for horizontal charts, must be configured with date as the data type.  The “from” and “to” values must be in the same format as the data.  Text and background colors are hex values.)

See a sample CSV data file [XLS – 250 B] .

Standard Line Chart with Isolated Lines on Load

For both lines and bar charts, you are able to configure which data series show on load.  This is useful when only some of the lines or bars tell the story of the data.  The configuration for this functionality is within the Legend area of the editor.

Standard Line Chart with Different Line Weights

Line weights have always been a certain weights, but we have received feedback that being able to adjust the thickness of lines can help users understand the data.  For example, one line may be for the United States total, but other lines are for regions or states.  To configure different line weights, expand the options for a Data Series in the Data Series area of the editor.  If you do not see a line weight option, you may need to remove and readd the Data Series.

Standard Line Chart with Open Circles or Special Lines

If you would like to call out specific data points, you can use other columns in your data set to automatically set open circle points on your line chart. These may indicate preliminary data, low data points, or a call-out date. These options can be configured by using the Add Special Line button in the Data Series Panel. Circle and Line types can be selected in the style dropdown.

Standard Line Chart with Suppressed Data

You can suppress data in a line chart for a number of reasons, including privacy concerns or preliminary data. Use the “Add Special Line” section under the Data Series panel.

Please note that for best results, and because users can download the raw data, you will want to use text to suppress the data in your dataset (replaced suppressed values with “SUP” or “ABC” or something similar), rather than just relying on suppressing by numeric value. See example data file [XLS – 443 B].