AAPL Stock Price

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>
<script src="https://code.highcharts.com/stock/modules/price-indicator.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/stock/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>

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

CSS

body {
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

#container {
    height: 500px;
    min-width: 310px;
    max-width: 900px;
    margin: 0 auto;
}

JavaScript

/**
 * Extend the Axis.getLinePath method in order to visualize breaks with two
 * parallel slanted lines. For each break, the slanted lines are inserted into
 * the line path.
 */
Highcharts.wrap(
    Highcharts.Axis.prototype,
    'getLinePath', function (proceed, lineWidth) {
        const axis = this,
            brokenAxis = axis.brokenAxis,
            path = proceed.call(this, lineWidth),
            start = path[0];

        let x = start[1],
            y = start[2];

        (brokenAxis.breakArray || []).forEach(function (brk) {
            if (brk.to <= axis.min || brk.from >= axis.max) {
                // Skip breaks outside the view.
                return;
            }
            if (axis.horiz) {
                x = axis.toPixels(brk.from);
                path.splice(
                    1, 0,
                    ['L', x - 4, y], // stop
                    ['M', x - 9, y + 5],
                    ['L', x + 1, y - 5], // left slanted line
                    ['M', x - 1, y + 5],
                    ['L', x + 9, y - 5], // higher slanted line
                    ['M', x + 4, y]
                );
            } else {
                y = axis.toPixels(brk.from);
                path.splice(
                    1, 0,
                    ['L', x, y - 4], // stop
                    ['M', x + 5, y + 1],
                    ['L', x - 5, y - 9], // lower slanted line
                    ['M', x + 5, y + 9],
                    ['L', x - 5, y - 1], // higher slanted line
                    ['M', x, y + 4]
                );
            }
        });
        return path;
    }
);

(async () => {
    const data = await fetch(
        'https://demo-live-data.highcharts.com/aapl-c.json'
    ).then(response => response.json());

    data[data.length - 10][1] *= 1.3;

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

    ...