JSFiddle - React, Tailwind, and code Playground

by Edo

HTML

<script src="//code.highcharts.com/adapters/standalone-framework.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<div id="container">
    <div id="container" class="container" style="width:100%; height:100%; border:1px dotted red"></div>
</div>

CSS

#container {
    height:150px;
    width:400px;
}

JavaScript

var colors = ['yellow', '#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
        colors: colors
    },
    plotOptions: {
        column: {
            colorByPoint: true,
            groupPadding: 0
        }
    },
    title: {
        text: 'Registreringer fra babkart.no',
        style: {
            'fontSize': '12px'
        }
    },
    xAxis: {
        categories: ["Oslo", "Arendal", "B\u00e6rum", "Asker", "Larvik", "V\u00e5g\u00e5", "Skien", "Porsgrunn", "Tinn", "Gran"],
        labels: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'poster'
        },
        min: 1,
        max: 15000,
		tickInterval: 2,
        minPadding: 0.5,
        maxPadding: 0
    },
    series: [{
        showInLegend: false,
        name: 'Antall registrerte poster',
        data: [1, 13417, 11745, 10777, 7919, 6540, 5873, 4696, 4122, 4073]
    }],
    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' + this.y;
        }
    }

});