Getting Started with Morningstar Base Charts

For Designers

To familiarize yourself with the Morningstar Base Charts library, you can:

1. Learn how to Choose a Chart to properly emphasize certain data relationships.

2. Understand how to apply our Visual Language to Charts.

3. Create charts in HTML pages using the available configurations.

4. Create charts for design and print artifacts using Morningstar chart standards, available in the documents below.

Chart Standards Design Assets

• Illustrator (as of October 6, 2017)
• PDF (as of October 6, 2017)

For Engineers

Installing MBC

Via NPM

1. Add an .npmrc file to your product (or update your existing one) with the following line:

   registry = https://msnexus.morningstar.com/content/repositories/npm-all/

   This will point your product to Morningstar‘s internal NPM server where the latest version of MBC can be retrieved.

2. Run command:

   git config --global url.https://github.com/.insteadOf git://github.com/

   This will update URLs to use https: instead of git:.

3. Then, install MBC in your product via NPM:

   npm install mbc --save-dev

   Optional: For Browserify or Webpack projects, after installing MBC as a NPM package, add chart aliases (and paths) to the browser field in your package.json file.

Via Script

1. Reference MBC from the window with the following:

   var Core = window["mbc-core"];
   var Barchart = window["mbc-vertical-bar"];

Extending a Chart

If a chart in the library doesn’t have a feature or style needed, you can extend it. Refer to Extending Morningstar Base Charts.

Additional MBC API Documentation

Read the Chart Components documentation for additional information on MBC APIs.

Submitting a Bug

If you find an issue, create a bug ticket under the MDS JIRA project, and include as much information as possible.

Depending on the severity of the issue or need for the feature, the Base Charts team will either assign the ticket to the current sprint, or prioritize it in the backlog. If your team has the resources to contribute a solution, please let us know in the ticket. We will then work with you to set expectations and plan to review the contribution.

Contributing

Read Contribution documentation for details on the prerequisites and process for submitting pull requests to the MBC repository.

Submitting a Pull Request

Read this Pull Request documentation to learn what information is required to review your pull request. Also read and adhere to our Development Style Guide before developing and submitting a pull request to ensure all code is consistently written. Any requests which do not follow these guidelines will be marked as “Needs Work” and will not be reviewed until the necessary information is added.

Versioning

We adhere to SemVer for versioning.

Dependencies

*D3.js, version ^3.5.17