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>

<div id="container1" style="min-width: 300px; height: 120px; margin: 0 auto"></div>
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    Highcharts.chart('container', {
    credits: { enabled: false },
    exporting: { enabled: false },
     colors:['red','orange','green'],
        chart: {
            type: 'column',
			spacingBottom: 10,
        	spacingTop: 30,
       	 	spacingLeft: 0,
       	 	spacingRight: 0,

			style: {
            	fontFamily: 'MuseoSans-500',
				fontSize: '14px'				
        	}		
			
        },
        title: {
            text: ''
        },
        xAxis: {
            type: 'category',
            
            labels: {
            
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            lineWidth: 1,
             tickInterval: 50,
               dashStyle: 'Dash',
            title: {
                text: '(%lr)'
            },
             labels: {
    formatter: function() {
       return this.value+"%";
    },
    },
  
        },
        legend: {
            enabled: false
        },
        
        tooltip: {
            enabled: false
        },
        plotOptions: {
            series: {
                pointPadding: 0,
                groupPadding: 0,
            }
        },
        
        series: [{
           data:[{
                    name: 'l1',
                    y: 102,
                    color:"orange",
                    dataLabels: {
                    }
                    //stack: 'male'
                }, {
                name: 'l2',
                    y:110,
                    color:"red",
                    dataLabels: {
                    }
                }, {
                name: 'l3',
                    y:72,
                    color:"green",
                    dataLabels: {
                    }
                
                }],
           
            
            dataLabels: {
    enabled: true,
                    align: 'center',
           ...