JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script type="text/javascript" src="https://raw.github.com/highslide-software/highcharts.com/master/js/highcharts.src.js"></script>

<div id="container" style="width: 200px; height: 150px"></div>

CSS

body {
    background: black;
    margin: 1em
}

JavaScript

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        backgroundColor: '#333',
        plotBorderWidth: 1
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        labels: {
            enabled: false
        },
        gridLineWidth: 1,
        gridLineColor: '#444',
        gridZIndex: 4
    },
    
    
    yAxis: {
        title: {
            text: null
        },
        labels: {
            enabled: false
        },
        gridLineWidth: 1,
        gridLineColor: '#444',
        tickInterval: 1,
        gridZIndex: 4
    },
    
    credits: {
        enabled: false
    },
    
    title: {
        text: null
    },
    
    legend: {
        enabled: false
    },
    
    plotOptions: {
        column: {
            shadow: false,
            borderWidth: 0,
            pointPadding: 0,
            groupPadding: 0,
            stacking: 'normal'
        }
    },
    series: [{
        data: [2, 0, 1, 3, 0, 0, 1, 2, 2, 3],
        color: '#999',        
        type: 'column'
    }, {
        data: [1,4,3,6,5,4,2,6,7,8,5,6],
        type: 'column'
    }]

});