area-multiple.html

<div id="{{include.id}}" class="line-chart-pf"></div>
<script>
  var areaChartDataColumns = [
    ['data1', 350, 400, 350, 0],
    ['data2', 140, 100, 150, 205, 145, 50],
    ['data3', 10, 60, 90, 10, 325, 400],
    ['data4', 260, 10, 305, 100, 50, 150]
  ];
  var singleAreaChartDataColumns = [
    ['data2', 140, 100, 150, 205, 145, 50]
  ];

  var c3ChartDefaults = $().c3ChartDefaults();
  var areaChartConfig = c3ChartDefaults.getDefaultAreaConfig();
  areaChartConfig.bindto = '#{{include.id}}';
  areaChartConfig.data = {
    columns: areaChartDataColumns,
    type: 'area-spline'
  };
  var areaChart = c3.generate(areaChartConfig);
</script>