Area-Spline C3js folded chart will not stack

Question

I am trying to make a table broken down by regions using c3js, for example, in this example , however my rows will not stack - just being placed one above the other, for example:

Here is my 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', } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" /> <div id="chart"></div> 

Answer 1

If you are missing the description of groups , put this line after your type: area-spline line

 groups:[['other','home','vdp','vlp']], 

Answer 2

 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', groups:[['other','home','vdp','vlp']], keys: { x: 'metricDate', value: ["vlp", "home", "vdp", "other"] } }, axis: { x: { type: 'timeseries', } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" /> <div id="chart"></div>