To familiarize yourself with the Morningstar Base Charts library, you can:
Learn how to Choose a Chart to properly emphasize certain data relationships.
Understand how to apply our Visual Language to Charts.
Explore charts and their available configurations through the individual chart pages.
Create charts for digital and print artifacts using the assets below.
This Sketch file contains each Morningstar Base Chart and its common configurations, defined as reusable symbols.
Sketch’s Library feature allows you to define any
.sketch file as a library and access all of its symbols from any file. Library symbols aren’t added to your file’s symbols page, so your file stays lean, and updates to the library file are automatically synced across all files.
By hosting our shared MBC Sketch Library file in the Design SharePoint, we can share a single, centrally managed library of symbols that will automatically update as we add and change charts in MBC.
Follow the below steps to set up the MBC Sketch Library on your machine:
2. Navigate to the Libraries folder in the Sketch Resources directory of the Design SharePoint’s Resources section.
3. Click the
Sync button in the toolbar to sync the Libraries folder to your machine. If you haven’t installed OneDrive on your machine yet, you can find instructions and a video walkthrough on how to do so on the Design SharePoint homepage.
4. In Sketch, open the preferences pane and navigate to the Libraries tab. Click
Add Library... in the lower left corner and select the MBC Sketch Library file in the local
Design SharePoint - Libraries folder you created in the previous step.
5. You’re all set! You can now access all the MBC Sketch Library symbols in any file from the
Unlink from Library. The shared MBC Sketch Library file is locked to prevent accidental editing.
Detach from Symbol.
.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.
git config --global url.https://github.com/.insteadOf git://github.com/
This will update URLs to use
https: instead of
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.
This example implementation shows how you would instantiate a Vertical Bar chart.
Load D3.js and MBC on your page:
<!-- MBC CSS --> <link rel="stylesheet" href="/path/to/mbc-core.css"> <link rel="stylesheet" href="/path/to/mbc-flag.css"> <link rel="stylesheet" href="/path/to/mbc-vertical-bar.css"> <!-- D3.js --> <script src="/path/to/d3.js"></script> <!-- MBC JS --> <script src="/path/to/mbc-core.js"></script> <script src="/path/to/mbc-flag.js"></script> <script src="/path/to/mbc-legend.js"></script> <script src="/path/to/mbc-vertical-bar.js"></script>
Reference MBC from the window:
var Core = window["mbc-core"]; var Barchart = window["mbc-vertical-bar"];
If a chart in the library doesn’t have a feature or style needed, you can extend it. Refer to Extending Morningstar Base Charts.
Read the Chart Components documentation for additional information on MBC APIs.
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.
Read Contribution documentation for details on the prerequisites and process for contributing to MBC.
We adhere to SemVer for versioning.