The 'area' chart is strange when used more than thousands data for drawing

Hey guys, the chart is strange when I used the data type 'area' for drawing with thousands datas(1200+), but the 'line' type is pretty good for the drawing.
Type 'area':

Type 'line':

I need the area type chart, but I want the color follow the data line to fill, like below one(it's my iOS version):

Code(all the data in the attached zip file here: https://github.com/gaoshanyu/FileSelf):

```
var chart = this._c3Driven.generate({
bindto: this._canvasDom,
size: {
width: this._canvasObj.width(),
height: this._canvasObj.height()
},
padding: {
top: 5,
right: 10,
bottom: 0,
left: 50,
},
data: {
x: 'x',
columns: [
xAxis,
priceDatas,
averageDatas
],
axes: {
average: 'y1'
},
types: {
price: 'area',
average: 'line'
}
},
color: {
pattern: ['#0c93c0', '#ff8400']
},
axis: {
x: {
type: 'timeseries',
tick: {
culling: true,
count: 5,
fit: true,
format: "%H:%M"
}
},
y: {
tick: {
count: 3
}
},
y2: {
show: true,
tick: {
culling: true,
count: 1
}
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
},
zoom: {
enabled: true,
rescale: true
},
point: {
show: false
},
legend: {
show: false
}
});
```

Start with the supplied generate configuration and the attached 1200+ point data, comparing the area and line renderings. Done means the area chart renders the requested fill behavior consistently with the data lines while preserving the existing line-chart behavior.

Written by the indexing model from the issue text.