Product Name

Vertical Bar

Vertical Bar charts compare different items or the same item over time.

Vertical Bar Chart

Guidelines

Use When

  • Representing information compared against other information, such as with a point-in-time Return Chart.
  • Representing information compared against itself over time, such as with quarterly returns.

Don′t Use When

  • Representing trend.
  • Comparing data with a long x-axis labels.

Visual Language

  • Always use visualization colors from the Morningstar palette, including relevant color orders and meanings.
  • When there is the possibility of negative values within a chart, use vertical grey bands to align bars with their corresponding x-axis labels.

Behaviors

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

Editorial

  • The “Abbreviated” Y-axis Label ,y1abbreviation, should be used 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.
  • Only single characters, such as a “$”, can be included 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.

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