JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">


<script src="https://code.highcharts.com/stock/highstock.js"></script>

<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>

<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>

<script src="https://code.highcharts.com/modules/stock-tools.js"></script>

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

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

CSS

#container {
    height: 730px;
}

@media screen and (max-width: 600px) {
    #container {
        height: 400px;
    }
}

JavaScript

const commonOptions = {
    api: {
        url: 'https://demo-live-data.highcharts.com',
        access: {
            url: 'https://demo-live-data.highcharts.com/token/oauth',
            username: 'username',
            password: 'password'
        }
    }
};

const NVIDIACorpId = '0P000003RE';

const NVIDIAPriceConnector =
// eslint-disable-next-line no-undef
    new HighchartsConnectors.Morningstar.TimeSeriesConnector({
        ...commonOptions,
        series: {
            type: 'OHLCV'
        },
        securities: [
            {
                id: NVIDIACorpId,
                idType: 'MSID'
            }
        ],
        currencyId: 'EUR'
    });

Promise.all([NVIDIAPriceConnector.load()]).then(() => {
    const {
        [`${NVIDIACorpId}_Open`]: open,
        [`${NVIDIACorpId}_High`]: high,
        [`${NVIDIACorpId}_Low`]: low,
        [`${NVIDIACorpId}_Close`]: close,
        [`${NVIDIACorpId}_Volume`]: volume,
        Date: date
    } = NVIDIAPriceConnector.table.getColumns();

    const ohlc = [],
        volumeSeriesData = [],
        dataLength = date.length;

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

        volumeSeriesData.push([
            date[i],
            volume[i]
        ]);
    }

    Highcharts.stockChart('container', {
    		accessibility: {
        		series: {
            		pointDescriptionEnabledThreshold: false
            }
        },
        yAxis: [{
            labels: {
                align: 'left'
            },
            height: '80%',
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'left'
            },
            top: '80%',
            height: '20%',
            offset: 0
        }],
        rangeSelector: {
            selected: 4
        },
        tooltip: {
            shape: 'square',
       ...