Introducing MDS Chart Elements

Update: As of August 2022, MDS Chart Elements are available for production use. For details see the release announcement.

April 28, 2022—The MDS team today announces beta availability of a new library of MDS Chart Elements (MCE). Built on the same architecture as MDS components for Vue, MDS Chart Elements are designed to revitalize our approach to charts and data visualizations at Morningstar, offering a library of composable elements optimized for accessibility, flexibility, and reuse.

Chart elements provide individual components that teams can combine to build data visualizations to meet their user’s specific needs. Examples of composed charts will also be provided, including a selection of bar, line, donut, scatter, and combined plot types. Product teams are also encouraged to contribute examples, which can be accessed through CodePen.

A Flexible, Composable Approach To Data Visualizations

MDS Chart Elements are designed to be as flexible and composable as possible, making it easy for teams to mix and match elements to create visualizations tailored to product need.

• For teams building with MDS Vue, many aspects of working with chart elements will be familiar, including the fundamentals of building with Vue, managing dependencies, and working with a modular architecture. See About MDS for more information.
• When building with chart elements, many aspects of visual styling are handled automatically, including layout, spacing, and colors. This makes it easy for teams to create cohesive, branded visualizations.
• To ensure consistent use of colors within charts, a color utility is provided to allow access to our standard color palettes.
• Product teams control the data displayed on any visualization. Each plot element uses a specific data format which is documented for that element. Product teams can add multiple series, combine different plot types on the same chart, or even create custom plot elements which can be contributed back to the library in future.
• Responsiveness and other interactive behaviors are handled by product teams, allowing flexibility and control over the end user experience.
• Like all MDS components, chart elements are designed to support the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG 2.0). While guidelines for accessibility are provided for all elements, product teams are responsible for implementing those guidelines to build in an accessible manner.

What Types of Visualizations Are Supported in the Chart Element Beta?

The beta release of chart elements includes all elements necessary to meet or exceed the functionality of our legacy Morningstar Base Charts (MBC) for the following chart types:

• Donut
• Vertical Bar (Simple, Stacked, and Grouped Variations)
• Horizontal Bar (Simple, Stacked, and Grouped)
• Line / Time-Series Line
• Scatter Plot / Weighted Scatter Plot (Bubble)

Support for additional chart types and capabilities will be added gradually once chart elements have been released to production.

How Can Teams Access MDS Chart Elements?

Product teams can test MDS chart elements using CodePen, or by installing the elements from Nexus and testing in a local development environment.

Designers can experiment with the MDS Chart Elements Figma library and sticker sheet.

Do MDS Chart Elements Require Vue?

Similar to MDS Components, chart elements require Vue 2. Teams not building with Vue can apply chart element constants and visual language to the needs of their product. Teams building in this manner have flexibility in the technologies they choose, but are responsible for maintaining their implementation, resolving issues, building and testing for accessibility, and updating their code as standards evolve.

Are Chart Elements Accessible Out Of The Box? And What Does That Mean?

Ensuring that the elements we provide are accessible to everyone is a core facet of MDS. Chart elements are designed to be accessibility-ready based on the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG 2.0), which address the needs of low-vision users as well as those using assistive technologies. MDS documents best practices for building accessible experiences, however product teams are responsible for implementing those practices to support keyboard navigation, screen readers, and other assistive technologies. In the case of charts, teams need to provide aria descriptions of chart content, include a tabular view of the data that can be navigated via screen reader, and conduct manual testing to ensure the usability of the overall experience.

How Will This Impact Teams Using Morningstar Base Charts (MBC)?

Chart elements provide design cohesion with our legacy Morningstar Base Charts (MBC), while evolving our visual standards to meet current requirements for simplicity, accessibility, and brand cohesion.

• In contrast to our legacy Morningstar Base Charts (MBC), which offered fully-composed charts, chart elements offer simple building blocks and leave control in the hands of product teams.
• Teams migrating from MBC will be able to replicate the design of existing MBC charts when needed, but with added flexibility to compose new visualizations, and far more control over the end user experience.

Deprecating MBC

Once MDS chart elements are available for production use, Morningstar Base Charts (MBC) will be deprecated. The MDS team will continue to support MBC through an interim period, and to resolve critical issues reported by product teams. However future investment will focus on chart elements, and teams will be strongly encouraged to upgrade to chart elements to take advantage of new capabilities as they become available.

Updating Specialized MBC Charts

The following chart types are out of scope for the initial release of chart elements. A plan for updating these charts and ending support for MBC will be shared once chart elements have been released to production.

• Style Map
• Style Box
• Geographical Map
• Correlation Matrix