C3js stacked Area-Spline chart won't stack
<p>I'm trying to do a stacked area chart using c3js like in <a href="http://c3js.org/samples/chart_area_stacked.html" rel="noreferrer">this example</a>, however, my lines won't stack&mdash;they are just being placed on top of each other, like so:</p>

<p><img src="https://i.imgur.com/PUgpWS1.png" alt=""></p>

<p>Here's my code: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> 
c3.generate({
  data: {
    json: [
        {
          "metricDate": "2016-02-08",
          "vlp": 9046,
          "other": 904,
          "vdp": 10000,
          "home": 3543
        }, {
          "metricDate": "2016-02-09",
          "vdp": 7000,
          "other": 1103,
          "home": 3667,
          "vlp": 9542
        }, {
          "metricDate": "2016-02-10",
          "other": 1043,
          "vlp": 9751,
          "home": 3681,
          "vdp": 5000
        }, {
          "metricDate": "2016-02-11",
          "other": 1433,
          "home": 4059,
          "vdp": 4000,
          "vlp": 9924
        }
    ],
    type: 'area-spline',
    keys: {
      x: 'metricDate',
      value: ["vlp", "home", "vdp", "other"]
    }
  },
  axis: {
    x: {
      type: 'timeseries',
    }
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"&gt;&lt;/script&gt;
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" /&gt;

&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>