nvd3 tooltip

HTML

<script src="http://www.nvd3.org/js/data/stream_layers.js"></script>
<script src="http://nvd3.org/lib/d3.v2.js"></script>
<script src="http://www.nvd3.org/nv.d3.js"></script>
<script src="http://www.nvd3.org/js/lib/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.nvd3.org/src/nv.d3.css">
<div id="chart1">
    <svg style='height:200px'> </svg>
</div>

CSS

.brush .extent {
  stroke: #000;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

var exampleData = function() {
  return stream_layers(3,10+Math.random()*50,.1).map(function(data, i) {
    return {
      key: 'Stream' + i,
      values: data
    };
  });
};

var tooltip = function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' on ' + x + '</p>';
};

var brush = d3.svg.brush();
var brushed = function(){
    var extent0 = brush.extent();
    console.log("["+extent0[0]+","+extent0[1]+"]");
    var extent1;
    d3.select(this).call(brush.extent(extent0));
};

nv.addGraph(function() {
    var chart = nv.models.multiBarChart();
    chart.xAxis.tickFormat(d3.format(',f'));
    chart.yAxis.tickFormat(d3.format(',.1f'));
    chart.tooltip(tooltip);
    
    var svg = d3.select("#chart1 svg");
    
    svg.datum(exampleData())
      .transition().duration(500).call(chart);

    brush.x(chart.xAxis.scale()).on("brush", brushed);
    d3.select(".nv-multibar").append("g").attr("class", "brush").call(brush)
        .selectAll("rect").attr("height", 160);

    
    nv.utils.windowResize(chart.update);

    return chart;
});