Line

Line charts show an item or multiple items in sequence. They are the line chart to use if you wish to render only one value in each X-Axis interval.

Line Chart

Guidelines

Use When

  • Representing items in a sequence, where there is only one value within each X-Axis interval.
  • Comparing multiple items in a sequence, where there is only one value within each X-Axis interval. 

Don′t Use When

  • Displaying data where there are multiple values within each X-Axis interval. Instead, use a Time-Series Line chart.
  • Displaying data with a timestamp which needs to be interpreted by the chart. Instead, use a Time-Series Line chart.
  • Representing information that is intended for comparison, but not for comparing trends over time. Instead, use a Vertical Bar chart.

Visual Language

  • Never use colors other than those defined in the visualization palette.
  • Always use the relevant color orders and meanings from the visualization palette.
  • Always use the dotted-line configuration to establish visual hierarchy. Solid lines are intended to represent primary items, while dotted lines can be used to represent secondary or tertiary items, i.e., benchmarks.

Responsiveness

  • Within container widths of 600px or less, the chart’s legend moves to the top, and the internal padding between elements tightens.

Editorial

  • Use the “Abbreviated” Y-axis Label ,y1abbreviation, for things like currency abbreviations or other short labels, up to a maximum of 10 characters. Anything longer than that should use the “Full” Y-Axis Label, y1AxisLabel.
  • Include single characters, such as a “$”, at the beginning of the maximum Y-axis value. However, a “%” sign after the value should be moved to the “Abbreviated” Y-Axis label, y1abbreviation, to avoid offsetting the alignment of the Y-Axis text.
  • Strive for short, succinct axis labels and legend items that clearly describe the data.
  • Include the unit or increment in axis labels.

Code Reference

Necessary code documentation can be found in the MBC repository.

©2018 Morningstar, Inc. All rights reserved. Terms of Use