Candlestick

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/accessibility.js"></script>

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

CSS

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

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

.highcharts-tooltip {
    th {
        font-weight: normal;
        color: var(--highcharts-neutral-color-60);
    }

    td {
        text-align: right;
    }
}

TypeScript

(async (): Promise<void> => {
    const data = await fetch(
        'https://demo-live-data.highcharts.com/aapl-ohlc.json'
    ).then(response => response.json()) as
        Highcharts.SeriesOptionsRegistry['SeriesOhlcOptions']['data'];

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

        title: {
            text: 'AAPL Stock Price',
            align: 'left'
        },

        subtitle: {
            text: 'Generated from Google Finance API',
            align: 'left'
        },

        series: [{
            type: 'candlestick',
            name: 'AAPL Stock Price',
            data: data,
            dataGrouping: {
                units: [
                    [
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]
                ]
            }
        }],

        tooltip: {
            fixed: true,
            header: {
                borderColor: 'var(--highcharts-neutral-color-20)',
                borderWidth: 1
            },
            pointFormat: `
            <table>
                <tr>
                    <td rowspan="5" style="vertical-align: top;">
                        <svg width="14" height="14">
                            <circle cx="6" cy="7" r="5" fill="{point.color}"
                                stroke="var(--highcharts-neutral-color-80)"
                                stroke-width="1" />
                        </svg>
                    </td>
                    <td colspan="2"><b>{series.name}</b></td>
                </tr>
                <tr>
                    <th>Open</th>
                    <td>{point.open}</td>
                </tr>
                <tr>
                    <th>High</th>
                    <td>{point.high}</td>
                </tr>
                <tr>
        ...