JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="width: 170px; height:440px"></div>

JavaScript

$(document).ready(function() {
    var chart = new Highcharts.Chart({
        credits: { enabled: false },
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            height: 440,
            width: 170,
            margin:[2,2,17,2]
        },
        title: { text: null },
        subtitle: { text: null },
        xAxis: {
            categories: ['J','F','M','A','M','J','J','A','S','O','N','D'],
            labels: { style: {fontSize:'8px'}}
        },
        yAxis: { //Why won't the bars extend to the limits of the chart?!?
            title: { text: null },
            endOnTick:true,
            startOnTick:true,
            min:-9,
            max:8,
            maxPadding:1,
            minPadding:1
        },
        plotOptions: {
            column: {
                shadow: false,
                borderWidth: 0
            }
        },
        tooltip: { enabled:false },
        legend:  { enabled: false },
        series: [{
            data: [
                {y:-7,    color: '#FF0000'}, 
                {y:-6,    color: '#FF0000'},
                {y:-9,    color: '#FF0000'},
                {y:20,    color: '#00EE00'},
                {y:80,    color: '#00EE00'},
                {y:40,    color: '#00EE00'},
                {y:-1,    color: '#FF0000'},
                {y:-4,    color: '#FF0000'},
                {y:-6,    color: '#FF0000'},
                {y:3,    color: '#00EE00'},
                {y:-2,    color: '#FF0000'},
                {y:-1,    color: '#FF0000'}
            ]
        }],
    });
});