# How to embed chartjs into custom element ?

**URL:** <https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [March 16, 2021, 8:33am UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570 "2021-03-16T08:33:31Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![xavierfressard](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/xavierfressard/32/27288_2.png) [@xavierfressard](https://forum.wixstudio.com/u/xavierfressard)\
**Post date:** [March 16, 2021, 8:33am UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570/1 "2021-03-16T08:33:31Z")

</div>

Hi !  
I am trying to insert a chartjs graph on my website using custom element. I used the example here : [https://www.wix.com/velo/example/chart.js-custom-element](https://www.wix.com/velo/example/chart.js-custom-element) to start.

My code seems to work fine on the preview website, but when I publish the website, the charts do not appear. Data and labels array seem to be empty and the console says “Uncaught TypeError: this.\_parent is null” referring to line 13 in the custom-element code in velo :

![](https://us1.discourse-cdn.com/wix/original/3X/1/f/1fce5eef18506888562755bee4ff86ef86651b6f.png)  
chart-elem being my custom-element id.

Any Idea on how to fix this ?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![chris-derrell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/chris-derrell/32/1774_2.png) [@chris-derrell](https://forum.wixstudio.com/u/chris-derrell)\
**Post date:** [March 16, 2021, 9:45am UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570/2 "2021-03-16T09:45:04Z")

</div>

Hey Xavier,

When the constructor code runs, there is actually no chart-elem as yet. That line is giving you a reference back to the Custom Element definition in line 71, not the ID of the custom element. Since it crashes in the constructor, it would block the rest of the code.

Since that line is only used again to set the display of the custom element to block in line 37 of the example, you can comment out/remove both lines. _Technically, although I haven’t tested it myself, it should work fine without them._

If not, in the constructor, you can add a stylesheet instead to do the same styling between line 6 and line 7 (where this.\_shadow and this.\_root were defined) - **Example below**

```javascript
//Add this between lines 6 and 7
let style = document.createElement('style');
style.innerHTML = `:host { 
    display: block; 
}`;
this._shadow.appendChild(style); //The this._shadow variable points to the Shadow Dom inside the custom element.

```

---

<div class="post-metadata">

**Author:** ![xavierfressard](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/xavierfressard/32/27288_2.png) [@xavierfressard](https://forum.wixstudio.com/u/xavierfressard)\
**Post date:** [March 18, 2021, 7:28am UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570/3 "2021-03-18T07:28:07Z")

</div>

Hi Chris

Thank you for your answer it worked !

I indeed needed to add the stylesheet as you said.

thank you for being this responsive  
Xavier

---

<div class="post-metadata">

**Author:** ![chris-derrell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/chris-derrell/32/1774_2.png) [@chris-derrell](https://forum.wixstudio.com/u/chris-derrell)\
**Post date:** [March 18, 2021, 7:36am UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570/4 "2021-03-18T07:36:15Z")

</div>

My pleasure, glad it helped

---

<div class="post-metadata">

**Author:** ![david17483](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/david17483/32/8456_2.png) [@david17483](https://forum.wixstudio.com/u/david17483)\
**Post date:** [March 3, 2023, 8:17am UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570/5 "2023-03-03T08:17:09Z")

</div>

Hey @chris-derrell Thanks for assisting Xavier. I have run into the same issue, however even when testing via the test site I receive a weird error even after changing the code (like its cached, but I clear it and even force a js filename change). The weird thing is sometimes after a page load, the chart actually loads.

![](https://us1.discourse-cdn.com/wix/original/3X/2/0/20fe75d2f5cca5290822a2c776ff6eb913e40ff3.png)

Even with the style attribute removed…

 ![](https://us1.discourse-cdn.com/wix/original/3X/6/6/668979f501935859edf90af49ef3c506285442f5.png)

---

<div class="post-metadata">

**Author:** ![chris-derrell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/chris-derrell/32/1774_2.png) [@chris-derrell](https://forum.wixstudio.com/u/chris-derrell)\
**Post date:** [March 6, 2023, 11:25am UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570/6 "2023-03-06T11:25:18Z")

</div>

That looks very strange indeed, and may have been a Wix specific issue. Has it cleared up, and have you gotten to a solution?

---

<div class="post-metadata">

**Author:** ![olivierdubuisson](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/olivierdubuisson/32/17777_2.png) [@olivierdubuisson](https://forum.wixstudio.com/u/olivierdubuisson)\
**Post date:** [March 24, 2023, 9:44pm UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570/7 "2023-03-24T21:44:49Z")

</div>

I’m running the exact same issue as “Unknown Member”.

Here is my current construct:

 ![](https://us1.discourse-cdn.com/wix/original/3X/7/7/77b4d81565467ba778d5d8639a3acb1c0580f70e.png)

The file chartDist.js:

```javascript
import Chart from 'chart.js/auto';

class ChartElem extends HTMLElement {
    constructor() {
        super();
        this._shadow = this.attachShadow({ mode: 'open' });
        this._root = document.createElement('canvas');
        this._root.setAttribute("id", "myChart");   
        this._root.setAttribute("style", "width: 850px");
        this._root.setAttribute("align-items", "center");
        this._shadow.appendChild(this._root);

        this._parent = document.querySelector("chart-elem");
    }

    static get observedAttributes() {
        return ['chart-data'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'chart-data') {
            this.chartData = newValue;
        }
    }

    get chartData() {
        return this._chartData;
    }

    set chartData(d) {
        this._chartData = JSON.parse(d);
        sessionStorage.setItem('chartData', d);
        if (this._connected)
            this.render();
    }

    connectedCallback() {
        this._parent.style.display = "block";

        let savedData = sessionStorage.getItem('chartData');
        if (savedData && savedData !== 'undefined' && !this._chartData)
            this._chartData = savedData;
        this._connected = true;
        if (this._chartData) {
            this.render();
        }
    }

    render() {
        const ctx = this._shadow.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'radar',
            data: this.chartData,
            options: {
                elements: {
                    line: {
                        borderWidth: 3
                    }
                },
                scales: {
                    r: {
                        min: 0,
                        max: 100
                    }
                }
            },
        });
    }
}

window.customElements.define('chart-elem-dist', ChartElem);

```

The error I get on first load of the page

```javascript
chartDist.js:15 Uncaught TypeError: Cannot read properties of null (reading 'style')
    at r.value (chartDist.js:15:14)
    at chartDist.js:41:3
    at chartDist.js:41:3

```

And exactly like the previous comment, if I go back to previous page then forward to this page again, then the graph shows. Like if the custom-element needed some kind of library loaded before the custom-element and the sequencing is not correct.

I tried to embed it without the NPM package, however I’ve not investigated further yet as unsure how it would work with a custom element.

If you have any clues, I would happily take on your perspective.

Many thanks 🙏

---

<div class="post-metadata">

**Author:** ![david17483](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/david17483/32/8456_2.png) [@david17483](https://forum.wixstudio.com/u/david17483)\
**Post date:** [March 29, 2023, 8:57am UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570/8 "2023-03-29T08:57:13Z")

</div>

Hey, sorry for not replying sooner, completely forgot. So I did solve the issue. I would like to believe it was related to populating chart.data too soon after initialising chart (I might be wrong though, but this is what I remember roughly).

```javascript
var chart;

$w.onReady(async function () {
    chart = new ChartJSAPI($w('#customElement2'));
    
    //Do some await tasks
    
    chart.customization = chartWealthManagementCustomization;
    
    chart.data = {
            //Set pointradius to 0 to hide all the points on the graph
            datasets: [{ data, 
                pointRadius: 0, 
                borderColor: borderColor.toString(),
                backgroundColor: backgroundColor.toString()
            }]
        }
  }
   

```

Let me know if this isn’t the case and I will try dig deeper. PS, would love a github type implementation into wix 😉

I did also nuke the style attribute line

constructor() {  
super();  
this.\_shadow = this.attachShadow({ mode: “open” }); // sets and returns ‘this.shadowRoot’  
const wrapper = document.createElement(“canvas”);  
wrapper.setAttribute(“id”, “myChart2”);  
[//wrapper.setAttribute](https://wrapper.setAttribute)(“style”, “width: 100%”);  
this.\_shadow.appendChild(wrapper);  
this.\_parent = document.querySelector(“chart-elem2”);  
}

---

<div class="post-metadata">

**Author:** ![olivierdubuisson](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/olivierdubuisson/32/17777_2.png) [@olivierdubuisson](https://forum.wixstudio.com/u/olivierdubuisson)\
**Post date:** [April 1, 2023, 10:57pm UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570/9 "2023-04-01T22:57:35Z")

</div>

Good to know. I tried these tips but I remain unsuccessful. I wonder if this is a bug in 4.2.0. Which version did you implement?

---

<div class="post-metadata">

**Author:** ![david17483](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/david17483/32/8456_2.png) [@david17483](https://forum.wixstudio.com/u/david17483)\
**Post date:** [April 3, 2023, 10:12am UTC](https://forum.wixstudio.com/t/how-to-embed-chartjs-into-custom-element/7570/10 "2023-04-03T10:12:13Z")

</div>

I’m using 4.2.0. Hmm so strange…

![](https://us1.discourse-cdn.com/wix/original/3X/b/c/bcf4dfed30c5f43e68d6faf5afe1e4919217f77d.png)