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
Here’s a fork with a few modifications that get your chart working:
- 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.
With https://observablehq.com/@tmcw/module-require-debugger, you can see other ways to import the module, for example
ApexCharts = require("email@example.com/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.
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.
Oops, I must have forgotten to share the last version. It should work now. Glad you were able to get things working!