JSFiddle - React, Tailwind, and code Playground

by Gwangseok

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>http://c3js.org</small>

JavaScript

var chart = c3.generate({
  bindto: "#linechart",
  data: {
    x: "period",
    columns: [
      ["period", "~15/10/10", "~15/11/10", "~15/12/10", "~16/01/10", "~16/02/10", "~16/03/10", "~16/04/10", "~16/05/10", "~16/06/10", "~16/07/10", "~16/08/10", "~16/09/10", "~16/10/10", "~16/11/10", "~16/12/10", "~17/01/10", "~17/02/10", "~17/03/10", "~17/04/10", "~17/05/10", "~17/06/10", "~17/07/10"],
      ["발전량", 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],
      ["수전량", 163, 227, 282, 247, 329, 256, 229, 198, 185, 212, 408, 314, 212, 278, 440, 433, 379, 298, 303, 210, 184, 232],
      ["송전량", 272, 211, 64, 51, 78, 157, 258, 247, 280, 181, 189, 240, 160, 128, 113, 69, 94, 182, 205, 292, 327, 227],
      ["사용량", 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],
      ["미상계누적", 109, 93, 0, 0, 0, 0, 29, 78, 173, 142, 0, 0, 0, 0, 0, 0, 0, 0, 0, 82, 225, 220],
    ],
    colors: {
      발전량: "#4F7A9D",
      수전량: "#ED7D31",
      송전량: "#A5A5A5",
      사용량: "#FFC100",
      미상계누적: "#4372C0",
    },
  },
  axis: {
    x: {
      type: "category",
    },
  },
});