D3js Line Chart Tooltip

by nikunj2512

CSS

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill: none;
  stroke: steelblue;
}

.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 2;
  shape-rendering: crispEdges;
}

.grid .tick {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

JavaScript

var data = [{
    x: '1-May-12',
    y: 5
  }, {
    x: '30-Apr-12',
    y: 28
  }, {
    x: '27-Apr-12',
    y: 58
  }, {
    x: '26-Apr-12',
    y: 88
  }, {
    x: '25-Apr-12',
    y: 8
  }, {
    x: '24-Apr-12',
    y: 48
  }, {
    x: '23-Apr-12',
    y: 28
  }, {
    x: '20-Apr-12',
    y: 68
  }, {
    x: '19-Apr-12',
    y: 8
  }, {
    x: '18-Apr-12',
    y: 58
  }, {
    x: '17-Apr-12',
    y: 5
  }, {
    x: '16-Apr-12',
    y: 80
  }, {
    x: '13-Apr-12',
    y: 38
  }],
  width = 1200,
  height = 360,
  margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
  };
width -= margin.left - margin.right;
height -= margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
  .orient("bottom").ticks(0).tickSize(0)
  .tickFormat("").outerTickSize(0);

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

var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .attr("class", "bg-color")
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// function for the y grid lines
function make_y_axis() {
  return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);
}

// Draw the y Grid lines
svg.append("g")
  .attr("class", "grid")
  .call(make_y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat("")
  );

x.domain(d3.extent(data, function(d) {
  return parseDate(d.x);
}));
y.domain([0, d3.max(data, function(d) {
  return d.y;
})]);

data.sort(function(a, b) {
  return parseDate(a.x) - parseDate(b.x);
});

/*x.domain([parseDate(data[0].x), parseDate(data[data.length - 1].x)]);
y.domain(d3.extent(data, function (d) {
    return d.y;
}));*/

// Add the X Axis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform",...