Color assigns meaning and order to create clarity and consistency across widely-used data visualizations.
Use to tie data to asset classes.
Use to show positive or negative correlation within a Correlation Matrix.
Use to represent data relating to Morningstar Super Sectors.
Use to represent data related to the Morningstar Sustainability Rating.
Use to represent under, fair, or over valuation.
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.
$mds-font-weight-boldas the font weight to typography using performance colors.
Use when there are no specific color meanings associated with a visualization.
$mds-chart-color-1and ascending in order to
$mds-chart-color-15. If there are more than 15 items, begin again with
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.