CanvasJS with shadow DOM

[mattc]

Hi all,

Did someone manage to get CanvasJS to work with shadow DOM?

I’m totally new to CanvasJS and I’m just quickly experimenting with the library.
Part of my experiment was to create a web component. The web component simply set the shadow root to an empty div with a randomly generated id. Then the connectedCallback method just tries to create a chart using the random id.
In the browser console, I’m getting the following error:

Uncaught TypeError: Cannot read property ‘style’ of undefined
at p._updateOptions (canvasjs.min.js:166)
at p._initialize (canvasjs.min.js:168)
at p.render (canvasjs.min.js:201)

[Manoj Mohan]

@mattc,

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into your code, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[mattc]

Hi Manoj,

Here is the fiddle showing my issue (in dev tools console) when using shadow-root:
https://jsfiddle.net/fh1mdzpn/1/

Thanks

[Manoj Mohan]

@mattc,

Please take a look at this updated JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[mattc]

Hi Manoj,

Thanks for the quick response and I see what you did there. I didn’t know that the chart method could take a DOM element rather than an id.
Note: using new CanvasJS.Chart(this.chart…) works as well and avoid a lookup.