Morningstar’s new Product System is here.
Upgraded components, refined design language, and comprehensive guidance—easier than ever to use.
Explore Now
Skip to Content
Morningstar Design System
What’s New
Getting Started
Visual Language
Components
Charts
Writing Guidelines
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
This version adds support for Morningstar Intrinsic.
To learn more about Morningstar Intrinsic, read our
blog post
.
What’s New
Getting Started
Visual Language
Components
Charts
Writing Guidelines