JSFiddle - React, Tailwind, and code Playground

by Donggun Kim

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="areachart2"></div>

CSS

.c3-area {
  opacity:1;
}

JavaScript

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,
  }
});