JSFiddle - React, Tailwind, and code Playground

by Sanchit Jain

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.stocinn.com/stoccharts/js/stocChart.js"></script>
<div id='dountWithBarChartMenu'></div>

CSS

#dountWithBarChartMenu {
    width:800px;
    height:400px;
}

JavaScript

var data= {
				key :['India','China','Japan','Canada','Australia','England'],
				value : [10,50,80,60,40,80],
				label : 'employee',
				textAndLegendColor : 'black',
				color : ['red','green','blue','cyan','purple','brown']
		   };
		var subDataArray = {
					key :['Doctor','Engineers','Social Worker','Government Employees','XYZ'],
					color :["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd"],
					India :[45,67,32,56,34],
					China :[34,54,42,24,45],
					Japan :[23,34,45,40,23],
					Canada : [82,62,54,199,78],
					Australia : [45,34,23,32,44],
					England :[56,24,54,32,40]
				}; 
		
		var legendTextColor="purple";	
		var textStyleConfg={"font-family":"Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif","font-size":"12","background":"none","font-color":"green","font-weight":300,"axisTextColor":"purple","legendTextColor":"purple"};
		var cnfg={"data":data,"divId":"dountWithBarChartMenu","subDataArray":subDataArray}
		
$(document).ready(function () {
var stocChart23=$("#dountWithBarChartMenu").stocCharts(textStyleConfg);
		stocChart23.drawDountWithBarChart(cnfg);
});