JSFiddle - React, Tailwind, and code Playground

by pepperdigital

HTML

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

<div id="container" style="height: 100px; width: 400px; margin: 0 auto"></div>

JavaScript

$cumulative_chart = Highcharts.stockChart('container', {
        chart: {
            type: 'area',
            height: 500
        },
        plotOptions: {
            series: {
                //stacking: 'normal',
                dataGrouping: {
                    units: [[
                        'day',
                        [1]
                    ], [
                        'month',
                        [1, 3, 6]
                    ], [
                        'year',
                        null
                    ]]
                }
            }
        },
        yAxis: [{
            height: '50%'
        }, {
            top: '65%',
            height: '50%',
            offset: 0
        }],
         xAxis: {
            offset: 100
        },
        credits: {
            enabled: false
        },
        tooltip: {
                enabled: true,
                shared: true
            },
        series: [{
                type: 'area',
                data: [[1512086400000, 10626],[1512172800000, 21634],[1512259200000, 34994],[1512345600000, 51400],[1512432000000, 68430]],
                stack: 0,
                name: 'chart A',
                id: 'area'
            },
            {
                type: 'column',
                data: [[1512086400000, 10626],[1512172800000, 11008],[1512259200000, 13360],[1512345600000, 16406],[1512432000000, 17030]],
                stack: 1,
                name: 'chart B',
                yAxis: 1,
                id: 'column',
                showInLegend: false
            }]
    });