JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
  <p>
  lr=800A
  </p>
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto">

  
</div>

CSS

rect
{
  width:100%;
  fill:white;
}
g rect:nth-child(0) {
    fill: red;
}
g rect:nth-child(1) {
    fill: orange;
}
g rect:nth-child(2) {
    fill: #B40404;
}
g rect:nth-child(3) {
    fill: green;
}

tspan
{
  display:none;
}

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
       
       
        xAxis: {
            type: 'category',
            labels: {
                rotation: 0,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
       
        },
         plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            },
            series: {
                pointPadding: 0
           
            }
        },
        legend: {
            enabled: false
        },
      
        series: [{
            name: 'Population',
            data: [
                ['l1', 22],
                ['l2', 34],
                ['l3', 43],
     
            ],
            dataLabels: {
                enabled: true,
                rotation: 360,
                color: '#FFFFFF',
                align: 'center',
                format: '{point.y}%', // one decimal
               y: 80, // 10 pixels down from the top
                style: {
                    fontSize: '18px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});