JSFiddle - React, Tailwind, and code Playground

by Antony Joyson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class='student'>
<div class='month_chart'>

</div>
</div>

JavaScript

//	console.log(data,container,options1);
container = ".student .month_chart";
  options1 = {top:100, right:30, bottom:60, left:60,height:-100,width:400,class_name:"present_absent_chart",legend:"Count",bar_legend:true,title:' Count by Month',mousePopup:true};


data =[ {
			date: "2007",
			count: "754000",
			color: "#e25325"
		}, {
			date: "2008",
			count: "777000",
			color: "#c00000"
		}, {
			date: "2009",
			count: "742000",
			color: "#a00000"
		}, {
			date: "2010",
			count: "824000",
			color: "#e25325"
		}, {
			date: "2011",
			count: "941000",
			color: "#c00000"
		}, {
			date: "2012",
			count: "944000",
			color: "#a00000"
		}, {
			date: "2013",
			count: "926000",
			color: "#a00000"
		}, {
			date: "2014",
			count: "986000",
			color: "#e25325"
		}, {
			date: "2015",
			count: "1161000",
			color: "#c00000"
		}, {
			date: "2016",
			count: "1577000",
			color: "#a00000"
		}];
    
	var colors = [
			'#FEC107',
			'#FD5621',
			'#2095F2',
			'#4CB050',
			'#9B58B5',
			'#ffeb3b',
			'#ffc107',
			'#fe5621',
			'#3f51b5',
			'#4caf50',
			'#9b59b6',
			'#34495e',
			'#9b51b5',
		];
	var margin ={top:40, right:30, bottom:30, left:40}, width=400-margin.left - margin.right, height=400-margin.top-margin.bottom;
	
	if(options1!=''){
		margin = options1;
		if(options1.height)
			height+=options1.height;
		if(options1.width)
			width+=options1.width;
		if(options1.class_name)
			var class_name=options1.class_name;
	}

	var x = d3.scale.ordinal()
		.rangeRoundBands([0, width], width/900);

	var y = d3.scale.linear()
		.range([height, 50]);
	
	if(options1.title) {
		widthtitle=window.innerWidth;
		if (widthtitle>400) {
			class_title='text-center';
		} else {
			class_title='fltlft';
		}
		d3.select(container)
		.append('h4')
			.attr("class",class_name+'_title '+class_title+'')
			.text(options1.title)
	}

	var xAxis = d3.svg.axis()
		.scale(x)
		.orient("bottom");

	var yAxis =...