JSFiddle - React, Tailwind, and code Playground

by H17737

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 400px; height: 130px;"></div>

JavaScript

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            exporting: {
	            buttons: {
	                printButton:{
	                    enabled:false
	                },
	                exportButton: {
	                    enabled:false
	                }
	            }
            },
            credits:{
                enabled:false
            },
            title: {
                text: ''
            },
            xAxis: {
                 gridLineWidth: 0,
                 categories: ['UC turnover', 'UC margin', 'UC margin', '%UC average invoice amount', 'Average discount % on UC'],
                title: {
                    text: null
                },
                labels: {
                     style: {
                        color: '#000',
                        fontWeight:'bold',
                        fontSize: '12px',
                         lineHeight: '12px',
                         minWidth: '190px',
                         align: 'left'
                    },
                    useHTML:false,
                    formatter:function(){
                    
                        return '<div class="label" style="align:right">'+this.value+'</div>';
                    }
                },
                
                lineColor: '#ddd',
                lineWidth: 3,
                tickWidth: 0
                
            },
            yAxis: {
                gridLineWidth: 0,
                min: 0,
                title: {
                    text: null
                },
                labels: {
                    enabled: false
                }
            },
            tooltip: {
                valuePrefix:'+',
                valueSuffix: ' %'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: false
                    }
                }
            },
 ...