Horizontal Bar

Horizontal Bar charts compare different items.

Horizontal Bar

Guidelines

Use When

  • Representing information compared against other information, particularly data with long labels.
Example of pairing a horizontal bar chart with long labels.

Don′t Use When

Visual Language

Do center align the bars to data row when pairing with a table
Don‘t allow the table to wrap to another line, as it will misalign with the chart.

Responsiveness

  • Horizontal bar charts will resize to fill the available space.
  • At chart container sizes of 400px or less, the number of x-axis values and grid lines reduces. This is the default width for this behavior to occur, the width can be adjusted by setting the outerWidthBreakPoint parameter.
  • Set the outerWidthBreakPoint parameter to control the width of the chart container (in pixels) at which the number of X-axis values reduces to the amount set for breakPointTickNumbers. By default, outerWidthBreakPoint is set to 400 and breakPointTickNumbers is set to 2. The number set for breakPointTickNumbers controls the number of X-axis values in addition to the zero value which render on the X-axis.
Example of the visual appearance of the horizontal bar chart once it has hit its responsive breakpoint. The number of X-axis values shown when breakPointTickNumbers is set to 2.

Editorial

  • 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.

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