Get started with apexcharts CDN

MIT licensed

ApexCharts: Open-source library for interactive, customizable charts in React, Angular, and JS.

Tags:
  • charts
  • graphs
  • visualizations
  • data

Stable version

Copied!

How to start using apexcharts CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with apexcharts CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts/apexcharts.min.js"></script>
  <style>
    #chart {
      width: 500px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script>
    const chart = new ApexCharts(document.querySelector("#chart"), {
      series: [{
        data: [75, 111, 175, 122, 150, 220, 210, 180]
      }],
      options: {
        chart: {
          type: 'line',
          height: 350
        },
        title: {
          text: 'Line Chart Example'
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight'
        },
        markers: {
          size: 4,
          colors: ['#F44336'],
          strokeWidth: 0
        },
        xaxis: {
          categories: ['F Jan', 'M Feb', 'A Mar', 'A Apr', 'M May', 'J Jun', 'J Jul', 'A Aug']
        },
        yaxis: {
          title: {
            text: 'Value'
          }
        }
      }
    });

    chart.render();
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions