Step line

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/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">
        This stock line chart represents the performance of a recurring
        investment over time. The blue step line represents the invested amount,
        in this case 200 EUR each 30 days. The purple line represents the actual
        portfolio value and compares it to the invested amount.
    </p>
</figure>

CSS

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.highcharts-figure {
    margin: 0;
}

#container {
    height: 400px;
    min-width: 310px;
}

JavaScript

(async () => {
    Highcharts.Templating.helpers.lastValue = function () {
        const data = arguments[0].ctx.data;
        return data[data.length - 1].y.toFixed(2);
    };

    // Load the dataset
    const data = await fetch(
        'https://cdn.jsdelivr.net/gh/highcharts/highcharts@a9dcb12aad/samples/data/investment-simulator.json'
    ).then(response => response.json());

    // Create the chart
    Highcharts.stockChart('container', {
        rangeSelector: {
            selected: 4
        },

        title: {
            text: 'Investment simulator'
        },

        yAxis: {
            opposite: false,
            labels: {
                align: 'left',
                x: 0
            }
        },

        legend: {
            enabled: true
        },

        tooltip: {
            valueSuffix: ' EUR'
        },

        plotOptions: {
            series: {
                tooltip: {
                    valueDecimals: 2
                },
                pointStart: '2023-01-01',
                pointIntervalUnit: 'day'
            }
        },

        responsive: {
            rules: [{
                condition: {
                    minWidth: 1200
                },
                chartOptions: {
                    legend: {
                        align: 'right',
                        layout: 'proximate',
                        labelFormat: '{name} <b>({lastValue} EUR)</b>'
                    }
                }
            }]
        },

        series: [{
            name: 'Invested amount',
            data: data[0],
            step: true
        }, {
            name: 'Portfolio value',
            data: data[1]
        }]
    });
})();