I'm trying to create this stacked bar chart (using C3.js) like the on in this picture, which is a stacked bar chart for a timeseries.
My current configuration is: `
{
data: {
json: [
{
"calendar_date": "2018-11-01",
"segment_description": "Executive Suite",
"before_otb": 2,
},
{
"calendar_date": "2018-11-01",
"segment_description": "Handicapped Room",
"before_otb": 3,
},
{
"calendar_date": "2018-11-01",
"segment_description": "Junior Suite",
"before_otb": 5,
}
],
type: 'bar',
keys: {
x: 'calendar_date',
value: ['before_otb']
},
},
axis: {
x: {
type: 'timeseries'
}
}
}
`
You will need to be working on the data layout and heading toward using groups. Similar to below.
var chart = c3.generate({ data: { x: "x-axis", json:[ { "x-axis": "0", "data1": 30, "data2": 40, "data3": 20, "data4": 10, "data5": 50, "data6": 40 }, { "x-axis": "1", "data1" :20, "data2": 60, "data3": 10, "data4": 15, "data5": 40, "data6": 20, }], // etc etc keys: { x: "x-axis", value: ["data1", "data2", "data3", "data4", "data5", "data6"] }, groups: [ ["data1", "data2", "data3", "data4", "data5", "data6"] ], type: 'bar' } });
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.js"></script> <div id="chart"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.