Area Chart with dd-mm-yy

Date format with '-' separated

by Khadeer Mohammed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="ChartBox"></div>

CSS

text {
				fill: #555;
			}
			text.shadow {
			  stroke: #fff;
			  stroke-width: 3px;
			}
			path { 
			    stroke: #05c;
			    fill: none;
			}
			.axis path,
			.axis line {
			    fill: none;
			    stroke: rgba(0,0,0,.2);
			    shape-rendering: crispEdges;
			}
			.y.axis .tick:first-child line {
				stroke-opacity: 0;
			}
			.grid line {
			    stroke: #f2f2f2;
			    shape-rendering: crispEdges;
			}
			.grid path {
			    stroke-width: 0;
			}
			.line {
				stroke-width: 2.5px;
			}
			.area {
			    fill: rgba(0,85,204,.3);
			    stroke-width: 0;
			}

			.CircleG circle {
				stroke: #05c;
				stroke-width: 1.5px;
				fill: #fff;
				transition: fill ease-in .2s;
				-webkit-transition: fill ease-in .2s;
				-ms-transition: fill ease-in .2s;
			}
			.CircleG circle:hover {
				stroke-width: 2px;
				fill: #05c;
			}
			div.Tooltip {	
			    position: absolute;			
			    text-align: center;			
			    padding: 10px 1em;			
			    background: rgba(0,0,0,.8);
			    color: #eee;
			    box-shadow: 0 0 3px rgba(0,0,0,.3);
			    border: 0px;		
			    border-radius: 3px;			
			    pointer-events: none;	
			}
			div.Tooltip:after {
				content: '';
			    position: absolute;
			    top: 100%;
			    left: 50%;
			    margin-left: -6px;
			    border: 6px solid transparent;
			    border-top-color: rgba(0,0,0,.8);
			}
			div.Tooltip.Top:after {
				top: auto;
				bottom: 100%;
				border-top-color: transparent;
				border-bottom-color: rgba(0,0,0,.8);
			}
			div.Tooltip.Right:after {
				left: auto;
				right: 10px;
			}
			div.Tooltip.Left:after {
				left: 20px;
			}
			div.Tooltip.Right:after {
				left: auto;
				right: 20px;
			}
			.ChartBox {
				display: inline-block;
				background: #fff;
				box-shadow: 0 2px 2px rgba(0,0,0,0.1);
				padding: 1em;
				border-radius: 3px;
			}
			.Cont {
				display: block;
				background: #fff;
				padding: 1em;
				font-size: 15px;
				text-align: left;
				margin: 1em;
			}
			.GridLines line {
				stroke:...

JavaScript

var data = [{"date":"1-May-12","close":580.13},{"date":"30-Apr-12","close":400.98},{"date":"27-Apr-12","close":267},{"date":"26-Apr-12","close":189.7},{"date":"25-Apr-12","close":199},{"date":"24-Apr-12","close":430.28},{"date":"23-Apr-12","close":266.7},{"date":"20-Apr-12","close":234.98},{"date":"19-Apr-12","close":345.44},{"date":"18-Apr-12","close":443.34},{"date":"17-Apr-12","close":543.7},{"date":"16-Apr-12","close":350.13},{"date":"13-Apr-12","close":165.23},{"date":"12-Apr-12","close":262.77},{"date":"11-Apr-12","close":366.2},{"date":"10-Apr-12","close":368.44},{"date":"9-Apr-12","close":266.23},{"date":"5-Apr-12","close":163.68},{"date":"4-Apr-12","close":64.31},{"date":"3-Apr-12","close":169.32},{"date":"2-Apr-12","close":168.63},{"date":"30-Mar-12","close":159.55},{"date":"29-Mar-12","close":269.86},{"date":"28-Mar-12","close":167.62},{"date":"27-Mar-12","close":101.48},{"date":"26-Mar-12","close":60.98}]

var margin = {top: 20, right: 20, bottom: 50, left: 60},
			    width = 650 - margin.left - margin.right,
			    height = 300 - margin.top - margin.bottom;

			var parseDate = d3.time.format("%d-%b-%y").parse;
				formatDate = d3.time.format('%d %b')
				bisectDate = d3.bisector(function(d) { return d.date; }).left,
			    formatValue = d3.format(",.1f"),
			    formatCurrency = function(d) { return formatValue(d) + "%"; };

			var x = d3.time.scale()
				.range([0, width]);

			var y = d3.scale.linear()
				.range([height, 0]);

			var color = '#05C';

			var xAxis = d3.svg.axis()
			    .scale(x)
			    .orient("bottom")
			    .ticks(5)
			    .tickFormat(formatDate);

			var yAxis = d3.svg.axis()
			    .scale(y)
			    .orient("left")
			    .ticks(5);

			var area = d3.svg.area()
				.interpolate('cardinal')
			    .x(function(d) { return x(d.date); })
			    .y0(height)
			    .y1(function(d) { return y(d.close); })

			var line = d3.svg.line()
				.interpolate('cardinal')
			    .x(function(d) { return x(d.date); })
			    .y(function(d) {...