Home › forums › Chart Support › CanvasJS with shadow DOM
Tagged: shadow, web component
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)
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?
Here is the fiddle showing my issue (in dev tools console) when using shadow-root:
Please take a look at this updated JSFiddle.
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.
You must be logged in to reply to this topic.