Style Boxes show the investment style of a group of holdings. They are a key piece of Morningstar Intellectual Property and must be displayed consistently across all implementations.
<link rel="stylesheet" href="./assets/doc-dependencies/mbc-core.css"> <link rel="stylesheet" href="./assets/doc-dependencies/mbc-flag.css"> <link rel="stylesheet" href="./assets/doc-dependencies/mbc-style-box.css"> <link rel="stylesheet" href="./assets/doc-dependencies/mbc-style-box-equity.css"> <link rel="stylesheet" href="./assets/doc-dependencies/mbc-style-box-fixed-income.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <script type="text/javascript" src="./assets/doc-dependencies/mbc-core.js"></script> <script type="text/javascript" src="./assets/doc-dependencies/mbc-flag.js"></script> <script type="text/javascript" src="./assets/doc-dependencies/mbc-style-box.js"></script> <script type="text/javascript" src="./assets/doc-dependencies/mbc-style-box-equity.js"></script> <script type="text/javascript" src="./assets/doc-dependencies/mbc-style-box-fixed-income.js"></script> <script type="text/javascript"> var Core = window["mbc-core"], Chart = window["mbc-style-box-equity"], container = d3.select("#your-chart-container-id"), chartInstance = new Chart({ "secondaryLabelsEnabled": false }), dataset = { "values": [56, 12, 9, 1, 3, 9, 7, 2, 1] }; container.style({ height: "300px" }); container.datum(dataset).call(chartInstance.init()); </script>
Use to represent the investment style of equity holdings (i.e., stocks and stock funds) as a relationship between market capitalization, and growth vs. value factors.
Use to represent the investment style of fixed income holdings (i.e., fixed income funds or portfolios) as a relationship between credit quality and sensitivity to changes in interest rates.
The responsive behavior for the Style Box takes a desktop-first approach. This means that, as the size of the Style Box’s container reduces, the chart’s internal components will adjust to more efficiently use the available space.
Container Width |
Result |
---|---|
|
The label sizes reduce, and internal padding between elements tightens. |
|
The label and internal padding reduce again. |
|
The label and internal padding reduce again. |
|
All labels are removed. |
Necessary code documentation for each variation can be found in the MBC repository: