Skip to Content

Morningstar Design System

Overview

• Charts Overview
• About Chart Elements
• Chart Examples
• Legacy Charts (MBC)

Building With Chart Elements

• Design Standards
• Visual Language
• Making Charts Accessible
• Interactions and Behaviors
• Color Utility

Elements

• Area Plot
• Area Plot Stacked
• Bar Plot
  • Bar Plot Horizontal
  • Bar Plot Horizontal Benchmark
  • Bar Plot Horizontal Grouped
  • Bar Plot Horizontal Stacked
  • Bar Plot Vertical
  • Bar Plot Vertical Benchmark
  • Bar Plot Vertical Grouped
  • Bar Plot Vertical Stacked
• Donut Plot
• Grid
• Guidelines
• Histogram Plot
• Hover Flag
• Layout
• Legend
• Line Plot
• Pointer
• Scatter Plot
• Scatter Plot Benchmark
• Scatter Plot Weighted
• X-Axis
• Y-Axis

Primitives

• Circle
• Group
• Line
• Path
• Rectangle

• Vue 2
• Vue 3

• Morningstar Brand System
• Morningstar Design System

• What’s New
• Getting Started
• Visual Language
• Components
• Charts
• Writing Guidelines
• Legacy Docs