A New Beginning For Data Visualization At Morningstar

August 29, 2022—The MDS team today announces the launch of MDS Chart Elements for production use. Built using Vue, Chart Elements make it easy for product teams and front end developers to create data visualizations that are:

• Aligned with Morningstar's visual language.
• Adaptable to the specific needs of our users.
• Accessible to users with low vision as well as assistive technologies.

A Shared Language For Data Visualizations

Chart Elements mirror the design of existing Morningstar Base Charts (MBC), while meeting new requirements for accessibility, brand, and technology support.

• Chart Elements handle visual styling so that teams can focus on data and composition.
• Product teams can apply standard color palettes using the color utility.
• Chart Elements use the same modular architecture as MDS Vue components. Aligning on Vue makes it easier for teams to collaborate and reduces the risk of deviations.

Adapted To the Way Teams Work Today

Rather than anticipate every use case, MDS Chart Elements empower teams to solve problems on their own.

• Product teams can mix and match plot types to compose their own visualizations.
• Teams maintain control over data, axes, responsiveness, and interactive behaviors. For example, the layout element handles positioning of elements within the chart. But product teams control the content in each area.
• Teams install only the elements they need, and manage dependencies on their schedule.
• Teams can create and contribute new plot elements as new use cases emerge.

Chart elements look great. The plug and play gives us great flexibility.

Making Data Visualizations Accessible To All Users

Ensuring that the elements we provide are accessible to everyone is a guiding principle of MDS.

• Chart Elements are designed to support the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG 2.0). This includes low-vision users as well as those using assistive technologies.
• MDS standard chart colors meet minimum WCAG contrast ratios when tested against white and grey backgrounds. This helps ensure they are distiguishable even to color-blind users. Many plot types also insert a white border between adjacent areas to ensure sufficient contrast.
• For those using assistive technologies, Chart Elements are rendered as HTML elements, allowing features like keyboard navigation to be implemented.
• Teams must provide aria descriptions of chart content, and conduct manual testing to ensure the usability of the overall experience.
• Teams should always provide a tabular view of the data that can be navigated via screen reader as an alternative to viewing or navigating the chart directly.

While guidelines for accessibility are provided, product teams are responsible for implementing those guidelines in their products.

Using more than five colors is likely to create challenges for color blind users.

Built To Evolve

Design is in the details. How do you choose the interval for a time series line chart when the horizon is uncertain? How many tick marks is too many? When should you use a grouped bar chart rather than a stacked bar chart? Do you need zebra stripes to make the grid easier to see?

MDS Chart Elements put these details in the hands of product teams, and empower teams to contribute updates as new requirements emerge. Which is why releasing the library is only the beginning. The real story begins today, with the stories and experiences that Morningstar product teams create for our users.

Built to evolve, Chart Elements will change the way teams create data visualizations, while upholding the mission that has guided MDS since 2017.

What Chart Types Are Supported?

As of August 2022, Chart Elements include all elements necessary to meet or exceed the functionality of Morningstar Base Charts (MBC) for the standard chart types listed below. The corresponding MBC charts have been deprecated. MBC will continue to be supported through an interim period, however new development will focus on Chart Elements.

The only exceptions are the IP Charts (style box, style map, geographical map, and correlation matrix). Until further notice, MBC remains the supported solution for these chart types.

Chart Type	Chart Elements (MCE)	Morningstar Base Charts (MBC)
Donut	✅	Deprecated
Vertical Bar (Simple, Stacked, Grouped)	✅	Deprecated
Horizontal Bar (Simple, Stacked, Grouped)	✅	Deprecated
Line	✅	Deprecated
Time Series Line	✅	Deprecated
Scatter Plot	✅	Deprecated
Weighted Scatter Plot (Bubble)	✅	Deprecated
Style Box		✅
Style Map		✅
Geographical Map		✅
Correlation Matrix		✅

Getting Started With Chart Elements

The best way to get started with MDS Chart Elements is to browse the documentation, and explore our library of examples.

For more background on MDS Chart Elements, see the following links:

• About MDS Chart Elements
• Chart Examples
• Building An Interactive Donut Chart
• Providing an Accessible Way To Navigate a Chart
• MDS Chart Elements Beta Release Announcement

The codepen collection has been a major help for getting our Playfair templates going.

Thanks To Our Collaborators

The MDS team would like to thank all those who shared requirements and feedback on the Chart Elements beta. In particular, we would like to thank the following individuals whose work was instrumental in shaping the design, development, and testing of MDS Chart Elements:

• Adam Rowe
• Alexander Hayashi
• Bradley Weller
• Graham Wimbrow
• Houqi Li
• Veronica Peterson