Product Name

Style Map

Style Maps show the distribution of investment style across one or more groups of holdings. Style Maps are Morningstar intellectual property and must be displayed consistently across all implementations.

Style Map Chart

Variations

Basic

Use Centroid icons, consisting of concentric circles, to plot each holding group by the weighted average of its investment style.

  • A filled Centroid represents the primary holding group that other data is being compared to. Other groups of holdings are represented with hollow Centroids.

Ownership Zone

Use to add depictions of the central 75% of each group’s holdings, referred to as Ownership Zones, to the Basic Style Map.

  • Ellipses represent Ownership Zones and are optional.
  • Only the primary holding group’s Ownership Zone should be rendered with a passive fill. Other groups of holdings are represented with outlined ellipses only. This provides visual hierarchy and ease of comparison.

Ownership Zone with Holdings

Use to add circular plots showing each individual holding to the Ownership Zone Style Map.

  • The individual-holding dots are sized based on their proportion within each group of holdings.

Guidelines

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.
  • Use a fill on the primary holding group’s Ownership Zone ellipse when it is the focal point of the visualization. If all of the holding groups are meant to be considered equally, only outline Ownership Zone ellipses.

Behaviors

  • When hovering on a Centroid, the weight of its lines increases and its Ownership Zone, if present, receives both an outline and a transparent fill. All plotted items other than those related to the hovered-on Centroid fade back. A tooltip appears, surfacing the underlying data values of the Centroid.
  • When hovering on a holding, all other plotted items fade back. A tooltip appears, surfacing the underlying data values of the holding, including its weight within its holding group.

Responsiveness

The responsive behavior for the Style Map takes a desktop-first approach. As the size of the Style Map’s container reduces, the chart’s internal components will adjust to more efficiently use the available space.

Container Width Result

600px

The label sizes reduce, and internal padding between elements tightens.

300px

The label sizes and internal padding reduce again.

225px

Labels are removed.

Editorial

  • Never change the labels on the Style Map.

Code Reference

Necessary code documentation can be found in the MBC repository.

©2017 Morningstar, Inc. All rights reserved. Terms of Use