var areachart2 = c3.generate({
bindto: "#areachart2",
data: {
columns: [
['upper', 120, 180, 270, 400, 570, 800, 1150],
['data', 100, 150, 225, 350, 500, 700, 1000],
['lower', 80, 120, 180, 300, 430, 600,850]
],
types: {
data: 'spline',
upper: 'area-spline',
lower: 'area-spline'
},
colors: {
data: "#000",
upper: "rgb(165,194,230)",
lower: "#fff",
}
},
legend: {
show: false,
},
point: {
show: false,
}
});
<div id="areachart2"></div>
.c3-area {
opacity:1;
}
External resources loaded into this fiddle: