# ReferenceError: SVG is not defined

**URL:** <https://talk.observablehq.com/t/referenceerror-svg-is-not-defined/2035>\
**Category:** Help\
**Created:** [June 6, 2019, 8:18am UTC](https://talk.observablehq.com/t/referenceerror-svg-is-not-defined/2035 "2019-06-06T08:18:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ghn](https://avatars.discourse-cdn.com/v4/letter/g/7cd45c/32.png) [@ghn](https://talk.observablehq.com/u/ghn)\
**Post date:** [June 6, 2019, 8:18am UTC](https://talk.observablehq.com/t/referenceerror-svg-is-not-defined/2035/1 "2019-06-06T08:18:58Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [June 6, 2019, 8:46am UTC](https://talk.observablehq.com/t/referenceerror-svg-is-not-defined/2035/2 "2019-06-06T08:46:29Z")

</div>

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

> **[Observable](https://observablehq.com/compare/57eb260398d45e9a@42...6d357afbd2120b50@60)**
>
> The magic notebook for visualization.

Notes:

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

> **[Module require debugger](https://observablehq.com/@tmcw/module-require-debugger)**
>
> An Observable notebook by Tom MacWright.

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.

---

<div class="post-metadata">

**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\
**Post date:** [June 6, 2019, 8:47am UTC](https://talk.observablehq.com/t/referenceerror-svg-is-not-defined/2035/3 "2019-06-06T08:47:40Z")

</div>

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

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

```

Doing so, and then using

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

```

you get access to your objects, I think.

---

<div class="post-metadata">

**Author:** ![ghn](https://avatars.discourse-cdn.com/v4/letter/g/7cd45c/32.png) [@ghn](https://talk.observablehq.com/u/ghn)\
**Post date:** [June 6, 2019, 9:08am UTC](https://talk.observablehq.com/t/referenceerror-svg-is-not-defined/2035/4 "2019-06-06T09:08:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [June 6, 2019, 1:21pm UTC](https://talk.observablehq.com/t/referenceerror-svg-is-not-defined/2035/5 "2019-06-06T13:21:13Z")

</div>

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