ReferenceError: SVG is not defined

Community Help
1

Hello!

I’m trying to load ApexCharts.js in a notebook and I get the following error: ReferenceError: SVG is not defined

Notebook reference https://observablehq.com/@ghn/line-graph

Anything I’m doing wrong? It’s pretty hard to debug with just this message. Any help is welcome

2

Here’s a fork with a few modifications that get your chart working:

Notes:

  • Whenever I have trouble with require I usually hit up this notebook:

In this case, the main function is inside the default property so I had to modify the suggestion a tiny bit.

  • I created a separate HTML element cell to serve as a container for the chart, and then passed the element directly to ApexCharts rather than using document.querySelector. Doing things this way makes it so that there’s an explicit dependence between the two cells in Observable’s runtime.
  • The chart was displaying with zero width until I put an explicit width number in.
1 Like
3

With https://observablehq.com/@tmcw/module-require-debugger, you can see other ways to import the module, for example

ApexCharts = require("apexcharts@3.7.1/dist/apexcharts.amd.js")

Doing so, and then using

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

you get access to your objects, I think.

4

Thanks for you quick reply. Very appreciated!
I cannot display your fork, but the link “Module require debugger” totally helped me solved my issue. I updated my notebook with a working solution.

1 Like
5

Oops, I must have forgotten to share the last version. It should work now. Glad you were able to get things working!