Basic line

author(s): Torstein Hønsi

by kakss

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- <script src="https://code.highcharts.com/modules/series-label.js"></script> -->
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!--
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
-->

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Basic line chart <!-- showing trends in a dataset. This chart includes the
        <code>series-label</code> module, which adds a label to each line for
        enhanced readability.-->
    </p>
</figure>

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Value versus cumulative net investment'
    },

    subtitle: {        text: '(c) 2020 Powered by PortfolioManager.Cloud'
    },

    yAxis: {
        title: {
            text: '$ \'000s'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: '' //Range: 2010 to 2017
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 1806
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});