title: Tooltip NVD3 AreaStackChart
body: <p>How do I add sufix 'USD' depending on key type 'Spent', on tooltip as well as on yAxis? </p>
  
  <p>And also I want the view should show only Impressions by default, but on click of other legend, suppose I click on Clicks or Installs or Spent, only the selected legend data should be visible on the graph.</p>
  
  <p>Data:</p>
  
  <pre><code>[{"key":"Impressions","values":[[1405535400000,15132],[1405539000000,15216],[1405542600000,14385],[1405546200000,11291],[1405549800000,10798],[1405553400000,10460],[1405557000000,12787],[1405560600000,15948],[1405564200000,18891],[1405567800000,15536],[1405571400000,14793],[1405575000000,16771],[1405578600000,16441],[1405582200000,18943],[1405585800000,15560]]},{"key":"Clicks","values":[[1405535400000,137],[1405539000000,6],[1405542600000,13],[1405546200000,49],[1405549800000,33],[1405553400000,97],[1405557000000,50],[1405560600000,17],[1405564200000,181],[1405567800000,35],[1405571400000,107],[1405575000000,17],[1405578600000,7],[1405582200000,143],[1405585800000,96]]},{"key":"Installs","values":[[1405535400000,0],[1405539000000,0],[1405542600000,1],[1405546200000,3],[1405549800000,0],[1405553400000,7],[1405557000000,2],[1405560600000,0],[1405564200000,11],[1405567800000,2],[1405571400000,3],[1405575000000,1],[1405578600000,0],[1405582200000,9],[1405585800000,3]]},{"key":"Spent","values":[[1405535400000,0.01],[1405539000000,0.46],[1405542600000,0.22],[1405546200000,0.93],[1405549800000,0.17],[1405553400000,0.22],[1405557000000,0.8],[1405560600000,0.63],[1405564200000,0.34],[1405567800000,0.8],[1405571400000,0.07],[1405575000000,0.17],[1405578600000,0.43],[1405582200000,0.97],[1405585800000,0.19]]}]
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>function kMFormatter(num) {
  if (num &gt; 999) {
      if (num &gt; 99999) {
          return d3.format(',.2f')(num / 100000) + ' M'
      }
      return d3.format(',.2f')(num / 1000) + ' K'
  }
  return num
  }
  
  function defaultChartConfig(container, data, useGuideline) {
      if (useGuideline === undefined) useGuideline = true;
  
  if (typeof d3 !== 'undefined') {
      var colors = d3.scale.category20();
      keyColor = function (d, i) {
          return colors(d.key)
      };
  
      var chart;
      nv.addGraph(function () {
          chart = nv.models.stackedAreaChart()
              .useInteractiveGuideline(true)
              .x(function (d) {
                  return d[0]
              })
              .y(function (d,key) {
                  return d[1]
              })
              .color(keyColor)
              .transitionDuration(300)
              .showControls(false);
  
  
  
          chart.xAxis
              .tickFormat(function (d) {
                  return d3.time.format('%X')(new Date(d))
              });
  
          chart.yAxis
              .tickFormat(function (d) {
                  return kMFormatter(d);
              });
  
  
          d3.select('#' + container + ' svg')
              .datum(data)
              .transition().duration(1000)
              .call(chart)
              .each('start', function () {
                  setTimeout(function () {
                      d3.selectAll('#d3_chart2 *').each(function () {
                          if (this.__transition__)
                              this.__transition__.duration = 1;
                      })
                  }, 0)
              })
  
          nv.utils.windowResize(chart.update);
  
          return chart;
      });
  
  
     }
  }
  </code></pre>