Horizontal Bar

Horizontal Bar charts compare different items.

Horizontal Bar Chart

Number of Bars

Show Negatives

X-axis Placement

Bottom Top

Legend

Tooltips

Benchmark

That combination of options is invalid.

View Code

Guidelines

Use When

Representing information compared against other information, particularly data with long labels.

Don′t Use When

Representing trend.
Comparing information over time.

Visual Language

Always use visualization colors from the Morningstar palette, including relevant color orders and meanings.

do center align the bars to data row when pairing with a table — Do center align the bars to data row when pairing with a table

dont allow the table to wrap to another line, as it will misalign with the chart. — Don‘t allow the table to wrap to another line, as it will misalign with the chart.

Behaviors

At container sizes of 400px or less, the number of x-axis values and grid lines reduces.

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.

Link Template