JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 100%; max-width:100%; height: 400px; margin: 0 auto"></div>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo:'container',
        marginLeft:120,
        marginBottom: 100,
        type:'bar'
    },
    credits: {enabled: false},
    legend: { 
        enabled: true,
        layout: 'vertical',
        backgroundColor: '#FFFFFF',
        floating: true,
        align: 'right',
        verticalAlign: 'bottom',
        margin: 50
    },
    title: {text: null},
    tooltip: {},
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'John',
        color: '#006666',
        pointWidth: 40,
        data: [2, 2, 1, 1, 1]
    }, {
        name: 'Jane',
        color: '#00FF00',
        pointWidth: 40,
        data: [2, 2, 2, 1, 2]
    }, {
        name: 'Joe',
        color: '#FF8C00',
        pointWidth: 40,
        data: [1, 1, 1, 1, 1],
    }],
    xAxis: {
        categories: ['Computer Devices & Accessories', 'Computer Peripherals Hire & Repair Services', 'Computer Laptop Hardware & Peripherals', 'Computer Stationery, Hard disk, Ram, Pen Drives & Other Products', 'Internet Accessories'],
        labels: {
            align:'left',
            x:5,
            style: {
                fontSize: '1em',
                color:'#fff',
                width:'500px'
            }
        }

    },
    yAxis: {
        min: 0,
        allowDecimals: false,
        title: {
          text: ''
        }
    }       
});