title: How can I put difference value label on lineplusbar chart in NVD3 graph?
body: <p>I am trying to put difference value of 2 points on above line in lineplusbargraph in nvd3 library but not finding any way. can i read xml file also instead of using simple value on his chart.I want to show difference of data usage for different months with bar graph and difference with line chart.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link href="../build/nv.d3.css" rel="stylesheet" type="text/css"&gt;
      &lt;script src="../build/d3.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="../build/nv.d3.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          text {
              font: 12px sans-serif;
          }
  
          svg {
              display: block;
          }
          html, body, #chart1, svg {
              margin: 0px;
              padding: 0px;
              height: 100%;
              width: 100%;
          }
          button {
              margin: 2px;
              margin-left: 80px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="position:absolute; top: 0; left: 0;"&gt;
      &lt;button onclick="chart.switchYAxisOrder(!chart.switchYAxisOrder()); chart.update();"&gt;toggle axis&lt;/button&gt;
      &lt;button onclick="chart.focusEnable(!chart.focusEnable()); chart.update();"&gt;toggle focus&lt;/button&gt;
      &lt;span style="color: #C60;"&gt;&amp;lt;-- turn focus on or off!&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="chart1" class='with-3d-shadow with-transitions'&gt;
      &lt;svg&gt; &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
      var testdata = [
          {
              "key" : "Quantity" ,
              "bar": true,
              "values" : [ [ 1136005200000 , 127100.0] , [ 1172638800000 , 564700.0], [ 1217476800000 , 2732646.0], [ 1277870400000 , 1309915.0] , [ 1335758400000 , 514733.0]  ]
          },
          {
              "key" : "Quantity" ,
              "values" : [ [ 1136005200000 , 127100.0] , [ 1172638800000 , 564700.0], [ 1217476800000 , 2732646.0], [ 1277870400000 , 1309915.0] , [ 1335758400000 , 514733.0]]
          }
      ].map(function(series) {
              series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
              return series;
          });
  
      var chart;
      nv.addGraph(function() {
          chart = nv.models.linePlusBarChart()
              .margin({top: 50, right: 80, bottom: 30, left: 80})
              .legendRightAxisHint(' [Using Right Axis]')
              .color(d3.scale.category10().range())
     .options({focusEnable: false});
  
          chart.xAxis.tickFormat(function(d) {
              return d3.time.format('%x')(new Date(d))
          }).showMaxMin(false);
  
          chart.y2Axis.tickFormat(function(d) { return '$' + d3.format(',f')(d) });
          chart.bars.forceY([0]).padData(false);
  
          chart.x2Axis.tickFormat(function(d) {
              return d3.time.format('%x')(new Date(d))
          }).showMaxMin(false);
  
          d3.select('#chart1 svg')
              .datum(testdata)
              .transition().duration(500).call(chart);
  
          nv.utils.windowResize(chart.update);
  
          chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
  
          return chart;
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>