Asset Allocations Bar

Shows fund asset allocation as a bar chart alongside a synchronized data grid.

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/math-modifier.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">
    Bar chart displaying fund asset allocation alongside a synchronized data grid.
</p>

CSS

@import url("https://code.highcharts.com/css/highcharts.css");
@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");

:root {
    --bond-col: #014ce5;
    --cash-col: #29d36a;
    --other-col: #ea293c;
    --stock-col: #fb8f0a;
    --nt-clas-col: #ababab;
    --hover-col: light-dark(#f2f3f4, #202124);
}

/* Series colors */
.highcharts-color-0 {
    color: var(--bond-col);
    stroke: var(--bond-col);
    fill: var(--bond-col);
}

.highcharts-color-1 {
    color: var(--cash-col);
    stroke: var(--cash-col);
    fill: var(--cash-col);
}

.highcharts-color-2 {
    color: var(--other-col);
    stroke: var(--other-col);
    fill: var(--other-col);
}

.highcharts-color-3 {
    color: var(--stock-col);
    stroke: var(--stock-col);
    fill: var(--stock-col);
}

.highcharts-color-4 {
    color: var(--nt-clas-col);
    stroke: var(--nt-clas-col);
    fill: var(--nt-clas-col);
}

/* Themes */
.theme-custom {
    --hcg-border-radius: 5px;
    --hcg-vertical-padding: 9px;
    --hcg-horizontal-padding: 4px;
    --hcg-border-width: 0;
    --hcg-header-column-border-width: 0;
    --hcg-font-size: 16px;

    /* Hovered colors */
    --hcg-cell-hovered-background: var(--hover-col);
    --hcg-row-hovered-background: var(--hover-col);
    --hcg-column-hovered-background: var(--hover-col);
    --hcg-header-column-hovered-background: var(--hover-col);
    --hcg-header-cell-hovered-background: var(--hover-col);
    --hcg-cell-hovered-row-background: var(--hover-col);
}

#container .highcharts-dashboards-wrapper {
    padding: 10px 15px 0;
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 30px;
}

#container .highcharts-dashboards-cell > .highcharts-dashboards-component {
    border: none;
    box-shadow: none;
}

.highcharts-dashboards-layouts-wrapper {
    height: 100%;
}

th:not(:first-child) .hcg-header-cell-content,
td:not(:first-child) {
    text-align: right...

JavaScript

const assetAllocationTypes = {
    1: 'Stock',
    2: 'Bond',
    3: 'Cash',
    4: 'Other',
    99: 'Not classified'
};

// Helper functions
Highcharts.Templating.helpers.translateAssetAllocation = value =>
    assetAllocationTypes[value];


async function renderWidget() {

    Dashboards.board('container', {
        dataPool: {
            // Fetch data with the Morningstar connector
            connectors: [{
                id: 'asset-allocations',
                type: 'MorningstarSecurityDetails',
                api: {
                    url: 'https://demo-live-data.highcharts.com',
                    access: {
                        url: 'https://demo-live-data.highcharts.com/token/oauth',
                        token: 'token'
                    }
                },
                converter: {
                    type: 'AssetAllocations'
                },
                security: {
                    id: 'F00001GPCX',
                    idType: 'MSID'
                },
                dataModifier: {
                    type: 'Chain',
                    chain: [{
                        type: 'Sort',
                        direction: 'desc',
                        orderByColumn: 'MorningstarEUR3_N'
                    }, {
                        type: 'Math',
                        columnFormulas: [{
                            column: 'negative',
                            formula: 'PRODUCT(C1, -1)'
                        }]
                    }]
                }
            }]
        },
        gui: {
            layouts: [{
                rows: [{
                    cells: [{
                        id: 'datagrid'
                    }, {
                        id: 'chart'
                    }]
                }]
            }]
        },
        components: [{
            sync: {
                visibility: true,
                highlight: true,
                extremes: true
            },
            connector: {
           ...