Charts Visual Language

Color

Color assigns meaning and order to create clarity and consistency across widely-used data visualizations.

Asset Allocation

Use to tie data to asset classes.

• If a product does not use these exact terms when breaking down asset classes, use the color associated with the closest asset type. For example, Alternatives would use the color ascribed to Real Estate.
• Never apply these colors to type, as they don’t meet Accessibility guidelines.

Correlation

Use to show positive or negative correlation within a Correlation Matrix.

Super Sectors

Use to represent data relating to Morningstar Super Sectors.

• Sectors that underlie a larger Super Sector should inherit the color of the Super Sector. For example, Basic Materials would use the color ascribed to Cyclical.
• Never apply these colors to type, as they don’t meet Accessibility guidelines.

Valuation

Use to represent under, fair, or over valuation.

• Never apply these colors to type, as they don’t meet Accessibility guidelines.

Performance

Use to show positive, neutral, or negative performance in both text and visualizations. The positive and negative colors are under evaluation for use in text, as they don’t meet Accessibility guidelines.

• Apply $mds-font-weight-bold as the font weight to typography using performance colors.

Color Order Inside Charts

Use when there are no specific color meanings associated with a visualization.

• Use colors in order, starting with $mds-chart-color-1 and ascending in order to $mds-chart-color-15. If there are more than 15 items, begin again with $mds-chart-color-1.
• This color order is intended to be a default for when there are not specific color meanings assigned to the data. Designers may deviate from the default when color can be used to communicate meaning.

Anatomy

Charts are made up of four distinct structural elements: Y-axis, X-axis, Chart Area, and Legend. These modular pieces can be reconfigured based on the data being visualized. Charts should feature these elements in consistent, predictable places to brand them as Morningstar charts and ease interpretation. Reconfigurations of structural elements should be done to communicate meaning, i.e., placing a Y-Axis on the right for a Goal Based Chart, rather than for purely aesthetic reasons.

Examples

Editorial

• Aim for evenly spaced, rounded units (i.e., 10, 20, 30—not 6.5, 8.7, 10.3, etc.)
• Limit significant digits and use one or two decimal places in most instances.
• Label the starting point of axes.
• Use logarithmic, rather than linear, scale for price/growth charts.
• When appropriate, highlight relevant data and/or labels directly on charts to add richness, density, and precision.
• Use consistent formatting for dates and time periods.