JSFiddle - React, Tailwind, and code Playground

by isqua

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Column chart with negative values'
        },
        xAxis: {
						startOnTick:true,
            endOnTick:true,
            type: "datetime"
        },
        yAxis: [
        		{
                reversed: false,
                labels: {
                    step: 1
                }
            }, {
            	// mirror axis on right side
                opposite: true,
                reversed: true,
                //linkedTo: 0,
                labels: {
                    step: 1
                }
            }
        ],
        plotOptions: {
          series: {
          //  stacking: 'normal'
          }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'John',
            data: [
            		[1362614400000, 6],
                [1362528000000, 2]
            ]
        }, {
        		reversedStacks: true,
            name: 'Jane',
            data: [
             		[1362614400000, -10],
                [1362528000000, -4]
            ]
        }, {
		        reversedStacks: true,
            name: 'Joe',
            data: [
             		[1362614400000, 8],
                [1362528000000, 9]
            ]
        }, {
            name: 'James',
            data: [
             		[1362614400000, -3],
                [1362528000000, -7]
            ]
        }]
    });
});