JSFiddle - React, Tailwind, and code Playground

by mangobug

HTML

<script type="text/javascript" src="http://www.highcharts.com/js/testing.js"></script>

<div id="container" style="height: 300px"></div>

JavaScript

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar',
        marginRight: 200,
        marginLeft: 10,
    },
    title: {
        text: 'Negative'
    },
    xAxis: {
        //type: 'logarithmic',
        categories: [''],
        title: {
            text: null
        }

    },
    yAxis: {
        min: 0,
        title: {
            text: '',
            align: 'high',
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -50,
        y: 100,
        floating: true,
        borderWidth: 1,
        shadow: true
    },
    tooltip: {
        formatter: function() {
            return '' + this.series.name + ': ' + this.y + ' millions';
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        "data": [4396],
        "name": "A"},
    {
        "data": [4940],
        "name": "B"},
    {
        "data": [4440],
        "name": "C"},
    {
        "data": [2700],
        "name": "D"},
    {
        "data": [2400],
        "name": "E"},
    {
        "data": [6000],
        "name": "F"},
    {
        "data": [3000],
        "name": "G"},
    {
        "data": [15000],
        "name": "E"}],

});