JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

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

<div id="grafica1">
</div>

CSS

#grafica2 tspan {
    font-size: 15pt;
    fill: #8cc640;
    font-family: Bebas-Bold;
    line-height: 30px;
}

JavaScript

$(function () {
    Highcharts.chart('grafica1', {
        chart: {
            type: 'bar',
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: ' '
        },
        xAxis: {
            type: 'category',
            labels: {
              useHTML: true
            }
        },
        yAxis: {
            title: {
                text: null,
            },
            labels: {
                    enabled: false
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                }
            }
        },

        tooltip:  
       { enabled: false },
       

        series: [{
            name: 'Production',
            colorByPoint: true,
            data: [{
                name: 'PACKAGING<br/> PAPERS<br>AND<br/>BOARDS',
                y: 49,
                color: '#005eb8'
            }, {
                name: 'CASE MATERIALS',
                y: 29.9,
                color: '#fff',
                borderWidth : 2,
                borderColor : '#005eb8'
            }, {
                name: 'OTHER PACKAGING & PAPER',
                y: 14.4,
                color: '#fff',
                borderWidth : 2,
                borderColor : '#005eb8'
            },{
                name: 'WRAPPINGS',
                y: 4.7,
                color: '#fff',
                borderWidth : 2,
                borderColor : '#005eb8'
            }, 
            {
                name: ' ',
                y: 100,
                color: '#fff',
                borderWidth : 0,
                borderColor : '#fff'
            }]
        }]
    });
});