How to fill the area between two lines using C3 chart? - c3.js

Question

Please open this link: http://c3js.org/samples/timeseries.html
Replace the code of textarea by following code:
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04',],
['bottomline', null,30, 150, 250],
['topline', 130, 340, 350,null]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
You will be able to see a graph like Fig:1 below.
Now I want to fill the area between two lines shown in the graph with some color. I want to make it like Fig:2 below.
Fig:1 and then Fig:2
Please help me on this.
Thanks in advance.

Answer 1

This is an old question, but just in case someone also meets this problem. Here is a working fiddle for filling between two lines.
Fill between two lines
Note: the null points should be handled before feeding to charts since null will be mapped to 0 automatically from C3 point of view.
Code snippet:
function fillArea(){
var indexies = d3.range( items.length );
var yscale = chart.internal.y;
var xscale = chart.internal.x;
var area = d3.svg.area()
.interpolate("linear")
.x(function(d) { return xscale(new Date(items[d].x)); })
.y0(function(d) { return yscale(items[d].bottomline); })
.y1(function(d) { return yscale(items[d].topline); });
d3.select("#mychart svg g").append('path')
.datum(indexies)
.attr('class', 'area')
.attr('d', area);}