You are viewing legacy documentation. View the most recent documentation.

Geographical Map

Geographical Maps show the distribution of data between countries.

Geographical Map


Use When

  • Representing information tied to specific countries, such as global market performance.

Don′t Use When

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. Common color sets to use with the Geographic Map would be Performance and Valuation.
  • Always pair Geographic Maps with an appropriate label, such as a component title or section header.
Example of how a geographical map can be paired with a header to clearly label what the map represents.
  • The legend should always have seven colors, two base colors, two tints of each base color, and one neutral color. These tints can be determined by each implementing team, but they should be based off of existing color constants from the visualization palette.
Example of creating a tint based color scale for the geographic map's legend. For example, when showing valuation, use $mds-visualization-color-performance-positive and $mds-visualization-color-performance-negative as the base colors for each color set, then tint those colors to create the two tints needed for each (i.e., 100% (base color), 60% (tint 1) and 20% (tint 2)). Use $mds-visualization-color-performance-neutral-chart to represent the central, neutral value.


  • Geographical maps will resize to fill the available space until they reach a width of 320px.
  • The legend’s width is fixed and decreases at a component width of 320px.


  • Include the unit or increment in legend labels.
  • Strive for a short, succinct label header for the chart which clearly describes the data.

Code Reference

Necessary code documentation can be found in the MBC repository.

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