JSFiddle - React, Tailwind, and code Playground

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="linechart"></div>
<small>기간: 전월 11일 ~ 당월 10일</small><br />
<small>http://c3js.org</small>

JavaScript

var chart = c3.generate({
  bindto: "#linechart",
  data: {
    x: "period",
    columns: [
      ["period", "15/10", "15/11", "15/12", "16/01", "16/02", "16/03", "16/04", "16/05", "16/06", "16/07", "16/08", "16/09", "16/10", "16/11", "16/12", "17/01", "17/02", "17/03", "17/04", "17/05", "17/06", "17/07", "17/08", "17/09"],
      ["발전량", 310.1, 319.3, 120.7, 113.6, 148, 248, 367, 355, 402, 304, 299, 357, 245, 210, 192, 151, 186, 306, 318, 425, 473, 367, 371, 357],
      ["수전량", 163, 227, 282, 247, 329, 256, 229, 198, 185, 212, 408, 314, 212, 278, 440, 433, 379, 298, 303, 210, 184, 232, 558, 317],
      ["송전량", 272, 211, 64, 51, 78, 157, 258, 247, 280, 181, 189, 240, 160, 128, 113, 69, 94, 182, 205, 292, 327, 227, 203, 224],
      ["사용량", 201.1, 335.3, 338.7, 309.6, 399, 347, 338, 306, 307, 335, 518, 431, 297, 360, 519, 515, 471, 422, 416, 343, 330, 372, 726, 450],
      ["미상계누적", 109, 93, 0, 0, 0, 0, 29, 78, 173, 142, 0, 0, 0, 0, 0, 0, 0, 0, 0, 82, 225, 220, 0, 0],
    ],
    colors: {
      발전량: "#4F7A9D",
      수전량: "#ED7D31",
      송전량: "#A5A5A5",
      사용량: "#FFC100",
      미상계누적: "#4372C0",
    },
  },
  axis: {
    x: {
      type: "category",
    },
  },
});