Color assigns meaning and order to create clarity and consistency across widely-used data visualizations.
Use when there are no product-specific or standard color meanings associated with a visualization. Teams may deviate from this order when color can be meaningfully used to commmunicate additional information about the data. When using these colors outside of this order, use the generic chart colors.
These colors are intended for use only once the initial order has been used. They should not be used outside of this context.
$mds-chart-color-1and descending in order to
$mds-chart-color-15. If there are more than 15 items, begin again with
Use to tie data to asset classes.
$mds-visualization-color-asset-allocation-alternative, Corporate Bonds and Government Bonds would use
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 visualizations.
Use when creating visualizations that use chart colors in ways outside of those defined by existing color orders or meanings.
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.