Highcharts Static Chart for Stock Product Page

author(s): Nancy Dillon

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>  
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://kit.fontawesome.com/3c770b0879.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400;600;700&display=swap" rel="stylesheet">
<div class="chart-container" id="stock"></div>

CSS

@import url("https://code.highcharts.com/css/highcharts.css");

html {
    overflow: hidden;
}

body {
    margin: 0;
}

/* Styles for all branded charts */

.chart-container .thick {
    stroke-width: 1;
    stroke: white;
    color: white;
    transition: all 2s;
}

.chart-container .thin {
    stroke-width: 1;
    stroke: white;
    color: white;
    transition: all 2s;
}

.chart-container .transparent {
    opacity: 1;
    stroke-width: 1;
    stroke: white;
    color: white;
    transition: all 2s;
}

.chart-container .highcharts-area,
.chart-container .highcharts-arearange {
    fill-opacity: 1;
    stroke: transparent;
}

.line {
    color: #fff;
    stroke: #fff;
    stroke-width: 1px;
}

.chart-container .highcharts-container {
    position: relative;
    overflow: hidden;
    text-align: left;
    line-height: normal;
    z-index: 0;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    fill: #2f2b38;
    font-size: 12px;
    user-select: none;
    touch-action: manipulation;
    outline: none;
}

.chart-container .highcharts-grid-line {
    fill: none;
    stroke: transparent;
    z-index: 40;
}

.chart-container .highcharts-xaxis-grid .highcharts-grid-line {
    stroke-width: 1px;
}

.chart-container .highcharts-plot-band,
.highcharts-pane {
    fill: #30426b;
    fill-opacity: 1;
    z-index: 30;
}

.chart-container .highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.chart-container .highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.chart-container .highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.chart-container .highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
    opacity: 1;
}

.chart-container .highcharts-series-inactive {
    opacity: 1;
    transition: opacity 50ms;
}

.chart-container .highcharts-tooltip-0 {
    filter: drop-shadow(5px 7px...

JavaScript

(async () => {

    // Load the dataset
    const data = await fetch(
        'https://demo-live-data.highcharts.com/aapl-ohlcv.json'
    ).then(response => response.json());

    Math.easeInSine = function (pos) {
        return -Math.cos(pos * (Math.PI / 2)) + 1;
    };

    Math.easeOutQuint = function (pos) {
        return (Math.pow((pos - 1), 5) + 1);
    };
    // Math.easeInQuint = function (pos) {
    //     return Math.pow(pos, 5);
    // },

    Math.easeOutBounce = pos => {
        if ((pos) < (1 / 2.75)) {
            return (7.5625 * pos * pos);
        }
        if (pos < (2 / 2.75)) {
            return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
        }
        if (pos < (2.5 / 2.75)) {
            return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
        }
        return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
    };

    const big = window.matchMedia('(min-width: 500px)').matches;

    // split the data set into ohlc and volume
    const ohlc = [],
        volume = [],
        dataLength = data.length,
        // set the allowed units for data grouping
        groupingUnits = [[
            'week',                         // unit name
            [1]                             // allowed multiples
        ], [
            'month',
            [1, 2, 3, 4, 6]
        ]];

    for (let i = 0; i < dataLength; i += 1) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);

        volume.push([
            data[i][0], // the date
            data[i][5] // the volume
        ]);
    }

    const static =   {
        chart: {
            animation: {
                enabled: true,
                duration: 2000,
                easing: 'easeOutQuint'
            },
            styledMode: true,
            margin: 0,
            spacing: 0,
            alignTicks: false,
           ...