iossafaricdnsafari-extensionapexcharts

Apex Chart using CDN link into HTML does not display

I am trying to display a chart using ApexCharts with a CDN link and the basic example from ApexCharts website. Unfortunately the chart does not display. Here is the code :

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10">
            <canvas id="chart"></canvas>
        </div>
    </div>
</div>

<script>

    var options = {
      chart: {
        type: 'line'
      },
      series: [{
        name: 'sales',
        data: [30,40,35,50,49,60,70,91,125]
      }],
      xaxis: {
        categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
      }
    }
    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();

</script>

</body>
</html>

I have been using chartjs with a CDN link and it works perfectly (this takes place within a django project but do not think this matters).

Solution

  • Change canvas to div

    <div id="chart"></div>