비전공자 개발일기

Chart 본문

Javascript

Chart

HiroDaegu 2022. 8. 24. 00:09
728x90
SMALL

 

 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CHART</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
  <div id="chart"></div>
</body>
</html>
#chart {
  max-width: 650px;
  margin: 35px auto;
}
var options = {
  chart: {
      height: 280,
      type: "area"
  },
  dataLabels: {
      enabled: false
  },
  series: [
      {
          name: "Follower(Family)",
          data: [15, 25, 38, 55, 69, 83, 99]
      }
  ],
  fill: {
      type: "gradient",
      gradient: {
          shadeIntensity: 4,
          opacityFrom: 0.7,
          opacityTo: 0.9,
          stops: [0, 90, 100]
      }
  },
  xaxis: {
      categories: [
          "01 Jan",
          "02 Feb",
          "03 March",
          "04 April",
          "05 May",
          "06 June",
          "07 July"
      ]
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
728x90
LIST

'Javascript' 카테고리의 다른 글

Music Player  (0) 2022.08.26
Countdown Timer  (0) 2022.08.25
Ecommerce Website  (0) 2022.08.21
CSS & JS Bubble Effect  (0) 2022.08.14
Word Guess Game  (0) 2022.08.12
'Javascript' Related Articles more