Credit Quality Breakdown

Compares credit quality distribution between two funds as a grouped column chart.

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/grid-axis.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/connectors/morningstar/connectors-morningstar.js"></script>

<div id="container"></div>
<p class="highcharts-description">
    Grouped column chart comparing credit quality distribution between two funds.
</p>

CSS

#container {
    min-height: 600px;
}

.highcharts-description {
    background: light-dark(#f2f6f2, #323232);
    border-radius: 0 4px 4px 0;
    border-left: 2px solid light-dark(#1d6aff, #fff);
    font-size: 0.8rem;
    font-style: italic;
    padding: 8px 16px;
    margin: 2em 10px 1em;
}

JavaScript

// The region codes are available in the dictionary tab
// of the security details datapoint file.
const creditQualityClassification = {
    1: 'Government',
    2: 'AAA',
    3: 'AA',
    4: 'A',
    5: 'BBB',
    6: 'BB',
    7: 'B',
    8: 'Below B',
    9: 'Not Rated'
};

// Helpers
Highcharts.Templating.helpers.translateCreditQuality =
    value => creditQualityClassification[value];


async function renderChart() {

    // Configure the connector
    const connector =
        new HighchartsConnectors.Morningstar.SecurityCompareConnector({
            api: {
                url: 'https://demo-live-data.highcharts.com',
                access: {
                    url: 'https://demo-live-data.highcharts.com/token/oauth',
                    token: 'token'
                }
            },
            converter: {
                type: 'CreditQualityBreakdown'
            },
            security: {
                ids: ['F00001GPCX', 'F00000YG2F'],
                idType: 'MSID'
            }
        });

    await connector.load();
    const dataTable = connector.getTable();

    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Credit Quality Chart',
            margin: 30,
            align: 'left'
        },
        legend: {
            align: 'right',
            verticalAlign: 'top'
        },
        dataTable,
        xAxis: [{
            grid: {
                enabled: true,
                borderColor: '#E1E1E1'
            },
            categories: dataTable.getColumn('Type_F00001GPCX'),
            labels: {
                format: '{translateCreditQuality value}'
            }
        }, {
            grid: {
                enabled: true,
                borderColor: '#E1E1E1'
            },
            categories: dataTable.getColumn('N_F00001GPCX'),
            labels: {
                format: '{value:.2f}%',
                align: 'right',
                x: -5
     ...