JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
    
            chart: {
                renderTo: 'container',
                type: 'column'
            },
    
            title: {
                text: 'Total fruit consumtion, grouped by gender'
            },
    
            xAxis: {
                categories: ['2009', '2010', '2011']
            },
    
            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: 'Number of fruits'
                }
            },
    
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.options.year +' '+this.point.options.scenario+'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+this.point.stackTotal;
                }
            },
    
            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },
    
            series:[{
                data:[{name:'Apples', color:'green', data:[{x:0, y:10}]}, 
                               
                               {name:'Appdles', color:'green', data:[{x:0, y:10}]}, {name:'Appltes', color:'green', data:[{x:0, y:10}]}, 
                               {name:'Appsles', color:'green', data:[{x:0, y:10}]}, 
    ]}]
        });
    });
    
});