nvd3 bar chart options

HTML

<script src="http://www.nvd3.org/js/data/stream_layers.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://www.nvd3.org/nv.d3.js"></script>
<div id="chart1">
    <svg style='height:300px; width: 500px;'> </svg>
</div>

CSS

/********************
 * HTML CSS
 */


.chartWrap {
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/********************
 * TOOLTIP CSS
 */

.nvtooltip {
  position: absolute;
  background-color: rgba(255,255,255,1);
  padding: 10px;
  border: 1px solid #ddd;
  z-index: 10000;

  font-family: Arial;
  font-size: 13px;

  transition: opacity 500ms linear;
  -moz-transition: opacity 500ms linear;
  -webkit-transition: opacity 500ms linear;

  transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -webkit-transition-delay: 500ms;

  -moz-box-shadow: 4px 4px 8px rgba(0,0,0,.5);
  -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,.5);
  box-shadow: 4px 4px 8px rgba(0,0,0,.5);

  -moz-border-radius: 10px;
  border-radius: 10px;

  pointer-events: none;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nvtooltip h3 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.nvtooltip p {
  margin: 0;
  padding: 0;
  text-align: center;
}

.nvtooltip span {
  display: inline-block;
  margin: 2px 0;
}

.nvtooltip-pending-removal {
  position: absolute;
  pointer-events: none;
}


/********************
 * SVG CSS
 */


svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Trying to get SVG to act like a greedy block in all browsers */
  display: block;
  width:100%;
  height:100%;
}


svg text {
  font: normal 12px sans-serif;
}

svg .title {
 font: bold 14px Arial;
}

.nvd3 .nv-background {
  fill: white;
  fill-opacity: 0;
  /*
  pointer-events: none;
  */
}

.nvd3.nv-noData {
  font-size: 18px;
  font-weight: bolf;
}


/**********
*  Brush
*/

.nv-brush .extent {
  fill-opacity: .125;
  shape-rendering: crispEdges;
}



/**********
*  Legend
*/

.nvd3 .nv-legend .nv-series {
}

.nvd3 .nv-legend .disabled circle {
  fill-opacity:...

JavaScript

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

nv.addGraph(function() {
    var chart = nv.models.multiBarChart();
    chart.xAxis
        .tickFormat(d3.format(',f'))
        .staggerLabels(true);
    chart.yAxis
        .tickFormat(d3.format(',.1f'));

    chart.showControls(true);
    chart.showLegend(true);
    chart.multibar.stacked(true);
    chart.reduceXTicks(false);
    chart.tooltip(tooltip);
    
    d3.select('#chart1 svg')
        .datum(exampleData())
      .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

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