Simple Apex Charts with jQuery not working

Question

I want to draw a chart in my Wordpress website usin Apexcharts by accessing a json file through a url. I've read the documentation and found the example in https://github.com/apexcharts/apexcharts.js/blob/main/samples/vanilla-js/misc/jquery.html .

I've simplified the code a bit further to just:

jQuery Ajax Example

<link href="../../assets/styles.css" rel="stylesheet" />

<style>
  
    #chart {
  max-width: 650px;
  margin: 35px auto;
}
  
</style>



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


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
  
    var options = {
      series: [],
      chart: {
      height: 350,
      type: 'bar',
    },
    dataLabels: {
      enabled: false
    },
    title: {
      text: 'Ajax Example',
    },
    noData: {
      text: 'Loading...'
    },
    xaxis: {
      type: 'category',
      tickPlacement: 'on',
      labels: {
        rotate: -45,
        rotateAlways: true
      }
    }
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
  
  
    $.getJSON('http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly', function(response) {
    chart.updateSeries([{
      name: 'Sales',
      data: response
    }])
  });
  
</script>

However, the only thing that appears is an empty chart saying "Loading...", as if no data was being fetched. I've tried using the entire code and subsections of it in a HTML block (I'm using the Elementor editor) but it simply doesn't work no matter what I try. This is specially frustrating as there's no console error which can guide me, it simply doesn't show anything.

Am I doing some obvious mistake here?