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.)
- Building in the WCMSSee key tips and guidelines for working with line charts in the WCMS.
- TP4 UX Best Practices [PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
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.
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 information can be added to the “Description” box under the “General” section of the “Configure” tab.
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
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.)