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. Instead, use a Line chart or a Time-Series Line chart.
• Comparing data with a long x-axis labels. Instead, use a Horizontal Bar chart.
• Comparing proportions that total to 100%. Instead, use a Donut 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.
• When there is the possibility of negative values within a chart, use vertical grey bands to align bars with their corresponding x-axis labels.

Responsiveness

• At container sizes 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.