JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>

<div style="width: 600px; height: 400px; margin: 0 auto">
	<div id="container" style="width: 600px; height: 400px; float: left"></div>
</div>

JavaScript

$(function () {
    
    var weeks = [1,2,3,4],
        plan_2g = [5,6,3,4],
        install_2g = [5,6,4,3],
        plan_3g = [5,4,3,2],
        install_3g = [4,3,2,1]
    
    $('#container').highcharts({

		        chart: {
		            type: 'column',
		            zoomType: 'y'
		        },

		        title: {
		            text: 'Main title'
		        },

		        xAxis: {
		            categories: weeks
		        },

		        yAxis: {
		            allowDecimals: false,
		            min: 0,
		            title: {
		                text: 'RBS-s'
		            }
		        },

		        tooltip: {
		            shared:true
		        },
		        plotOptions : {
		        	column: {
		        		grouping: false,
		        		shadow: false,
		        		borderWidth: 0
		        	}
		        },
		        
		        series: [{
		            name: '2G Plan',
		            data: plan_2g,
		            color: 'rgb(124, 181, 236)',

		            pointPadding: 0.3,
		            pointPlacement: -0.3
		        }, {
		            name: '2G Install',
		            data: install_2g,
		            color: 'rgb(82, 119, 154)',

		            pointPadding: 0.4,
		            pointPlacement: -0.3
		        }, {
		            name: '3G Plan',
		            data: plan_3g,
		            color: 'rgb(134, 216, 115)',

		            pointPadding: 0.3,
		            pointPlacement: 0
		        }, {
		            name: '3G Install',
		            data: install_3g,
		            color: 'rgb(95, 154, 82)',

		            pointPadding: 0.4,
		            pointPlacement: 0
		        }
		        ],
		        exporting: {
					sourceWidth: 1000,
					sourceHeight: 400,
					scale: 1,
					chartOptions: {
						subtitle: null
					}
			}
		    });
    
});