Design System Product Manager
The MDS Chart Elements Beta Release Is Now Available
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.
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.
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:
Support for additional chart types and capabilities will be added gradually once chart elements have been released to production.
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.
Similar to MDS UI 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.
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.
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.
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.
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.