JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.shutterstock.com/rickshaw/rickshaw.js"></script>
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.v2.js"></script>
<link rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/graph.css">
<div id="chart_container">
	<div id="y_axis"></div>
	<div id="chart"></div>
	<div id="legend"></div>
	<form id="offset_form" class="toggler">
		<input type="radio" name="offset" id="lines" value="lines" checked>
		<label class="lines" for="lines">lines</label><br>
		<input type="radio" name="offset" id="stack" value="zero">
		<label class="stack" for="stack">stack</label>
	</form>
</div>

CSS

#chart_container {
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
}
#chart {
	float: left;
}
#legend {
	float: left;
	margin-left: 15px;
}
#offset_form {
	float: left;
	margin: 2em 0 0 15px;
	font-size: 13px;
}
#y_axis {
	float: left;
	width: 40px;
}

JavaScript

var palette = new Rickshaw.Color.Palette();


// The new ExtendedTime Axis: 

Rickshaw.Graph.Axis.ExtendedTime = function(args) {

	var self = this;

	this.graph = args.graph;
	this.elements = [];
	this.ticksTreatment = args.ticksTreatment || 'plain';
	this.fixedTimeUnit = args.timeUnit;

	var time = new Rickshaw.Fixtures.Time();

	this.appropriateTimeUnit = function() {

		var unit;
		var units = time.units;

		var domain = this.graph.x.domain();
		var rangeSeconds = domain[1] - domain[0];

		units.forEach( function(u) {
			if (Math.floor(rangeSeconds / u.seconds) >= 2) {
				unit = unit || u;
			}
		} );

		return (unit || time.units[time.units.length - 1]);
	};

	this.tickOffsets = function() {

		var domain = this.graph.x.domain();
        
		var unit = this.fixedTimeUnit || this.appropriateTimeUnit();
        
        var tickSpacing = args.tickSpacing || unit.seconds;
		var count = Math.ceil((domain[1] - domain[0]) / tickSpacing);
        
        console.log(count);

		var runningTick = domain[0];

		var offsets = [];

		for (var i = 0; i < count; i++) {

			var tickValue = time.ceil(runningTick, unit);
			runningTick = tickValue + tickSpacing;

			offsets.push( { value: tickValue, unit: unit } );
		}
        
        console.log(offsets);

		return offsets;
	};

	this.render = function() {

		this.elements.forEach( function(e) {
			e.parentNode.removeChild(e);
		} );

		this.elements = [];

		var offsets = this.tickOffsets();

		offsets.forEach( function(o) {

			if (self.graph.x(o.value) > self.graph.x.range()[1]) return;

			var element = document.createElement('div');
			element.style.left = self.graph.x(o.value) + 'px';
			element.classList.add('x_tick');
			element.classList.add(self.ticksTreatment);

			var title = document.createElement('div');
			title.classList.add('title');
			title.innerHTML = o.unit.formatter(new Date(o.value *...