JSFiddle - React, Tailwind, and code Playground

by rahilwazir

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="stackedchart"></div>
<div id="legendholder"></div>

CSS

.axis path,
.axis line {
	fill: none;
	stroke: #333;
	shape-rendering: crispEdges;
}

/*
text{
	fill: #fff;
}
*/

.bar {
	fill: steelblue;
}

.x.axis path {
	/*display: none;*/
}

.legendholderstacked{
	position: absolute;
	top: 22px;
	left: 0;
}

.stackedchart{
	position: relative;
	text-align: center;
}

.stackedchart .x.axis text{
	font-size: 11px;
	text-anchor:end!important;
}

#legendholder{
    position: absolute;
    right:0;  
    top:0;
}

JavaScript

var stackedChart = {
	init: function(){
		var that = this;
        
        var w = 600;
         var h = 600;
        var yLabel = "amount";
		
		that.getRawData(function(data){
			that.buildChart(data, w, h, yLabel);
		});
	},
	resizeChart: function(){
		var svg = $('.stackedchart');
		
		var aspect = svg.width() / svg.height();
		var targetWidth = svg.parent().parent().width();
		
		if(targetWidth!=null){
			svg.attr("width", targetWidth);
			svg.attr("height", Math.round(targetWidth / aspect));
		}
	},	
	buildChart: function(data, w, h, yLabel){

		var that = this;
	
		var margin = {top: 30, right: 55, bottom: 340, left: 95},
			width = w - margin.left - margin.right,
			height = h - margin.top - margin.bottom;

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

		var y = d3.scale.linear()
			.rangeRound([height, 0]);
			
		var colorArray = ["#538ed5", "#953735", "#e46d0a", "#75923c", "#b2a1c7", "#dc143c", "#87cefa", "#90ee90", "#add8e6", "#d3d3d3", "#cf1256", "#12cf5e"];	

		var color = d3.scale.ordinal()
			.range(colorArray);

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

		var yAxis = d3.svg.axis()
			.scale(y)
			.orient("left")
			//.tickFormat(d3.format(".2s"));
			
			var chartWidth = parseInt(width + margin.left + margin.right,10);
			var chartHeight = parseInt(height + margin.top + margin.bottom,10);

        
        
		var svg = d3.select("#stackedchart")
			.append("svg")
                .attr("class", "stackedchart")
				.attr("width", chartWidth)
				.attr("height", chartHeight)
				.attr('viewBox', "0 0 "+chartWidth+" "+chartHeight)
				.attr('perserveAspectRatio', "xMinYMid")
			.append("g")
				.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

						color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Label"; }));

					  data.forEach(function(d) {
						var y0 = 0;
						d.blocks = color.domain().map(function(name) {
							return {name: name, values: d[name], y0: y0,...