Style Box

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.

Style Box Chart

Type

Data

Secondary Labels

That combination of options is invalid.

View Code

<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>

Variations

Equity

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.

Fixed Income

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.

Guidelines

Visual Language

Never use colors other than those defined in the visualization palette.
Always use the relevant color orders and meanings from the visualization palette.

Responsiveness

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
`490px`	The label sizes reduce, and internal padding between elements tightens.
`400px`	The label and internal padding reduce again.
`285px`	The label and internal padding reduce again.
`225px`	All labels are removed.

Editorial

Never change the labels on the Style Box.
Consider using the available Secondary Labels in contexts where the user may not be familiar with the visualization.

Code Reference

Necessary code documentation for each variation can be found in the MBC repository:

Link Template