How to make Apexchart (JS library) render at frontend?

Question

I would like to use the Apexcharts library for my dashboard. Now I am already stuck with a very simple example from their documentation (according docu).

I used their example and tried to link it to my canvas container via ID, but it doesn't show up at all when i load the site.

I included the cdn link in my index.html at the very bottom and don't have any errors in my console.

According to the developer tools, something is happening at least:

This is my JS:

      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("#myChart"), options);

      chart.render();

This is the canvas container:

        <div class="column">
          <div class="wrapperDoughnut">
              <canvas width="220px" height="280px" id="myChart"></canvas>
          </div>
        </div>

Answer 1

That was luck... I got the solution. It seems Apexcharts library creates a canvas themselves when rendering a chart other than for example ChartJS which needs a canvas container predefined. So I just removed the canvas container and linked to the parent.

The Apex docu is pretty poor...

Nevertheless, should I delete this thread again?

Working solution:

HTML:

        <div class="column">
          <div class="wrapperDoughnut" id="myChart">

          </div>
        </div>

JS:

      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("#myChart"), options);

      chart.render();