JSFiddle - React, Tailwind, and code Playground

by vigneshwaranr

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="chartContent" style="width: 100%; height: 300px;"></div>

JavaScript

jQuery(function () {
$('#chartContent').highcharts({
    chart: {
        type: 'column',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    credits: {
        enabled: false
    },
    title: {
        text: ''
    },
    tooltip: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            colorByPoint: true,
            dataLabels: {
                enabled: true,
                color: '#444',
                connectorColor: '#000',
                formatter: function() {
                    return this.y == 0 ? null : this.y;
                },
                style: {
                    fontFamily: 'Arial',
                    fontSize: '12px',
                    fontWeight: 'bold'
                }
            }
        },
        series: {
            point: {
                events: {
                    legendItemClick: function () {
                        return false;
                    }
                }
            }
        }
    },
    series: [{
        data: [ 3, 4, 1, 6, 2 ]
    }],
    xAxis: {
        //categories: json.categories,
    },
    yAxis: {
        maxPadding:0,
        allowDecimals: false
    }
});
});