Basic line

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/connectors/morningstar/connectors-morningstar-dws.js"></script>

<div id="container"></div>

JavaScript

async function createChart () {

    // Configure the connector
    const connector =
        new HighchartsConnectors.MorningstarDWS.InvestmentsConnector({
            api: {
                url: 'https://demo-live-data.highcharts.com',
                access: {
                    url: 'https://demo-live-data.highcharts.com/token/oauth',
                    token: 'token'
                }
            },
            security: {
                id: '0P00000FIA'
            },
            converters: {
                EquitySectorsBreakdown: {}
            }
        });

    // Load data
    await connector.load();

    // Get data table
    const sectorsTable = connector.getTable('EqSectors');

    // Create chart
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Equity Sectors Breakdown'
        },
        dataTable: sectorsTable,
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: 'Sector weight'
            },
            labels: {
                format: '{value}%'
            }
        },
        tooltip: {
            valueSuffix: '%',
            valueDecimals: 2
        },
        series: [{
            dataMapping: { name: 'Type', y: 'PercLong' }
        }, {
            dataMapping: { name: 'Type', y: 'PercNet' }
        }]
    });
}

createChart();