Edit in JSFiddle

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: