# Chart.js not rendering on editor X?

**URL:** <https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [February 1, 2022, 12:00pm UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607 "2022-02-01T12:00:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![spamushere](https://avatars.discourse-cdn.com/v4/letter/s/df705f/32.png) [@spamushere](https://forum.wixstudio.com/u/spamushere)\
**Post date:** [February 1, 2022, 12:00pm UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607/1 "2022-02-01T12:00:07Z")

</div>

I’ve been struggling for a week to get Chart.js to render using my data, I replicated the Chart.js example (https://www.wix.com/velo/example/chart.js-custom-element) exactly, but it’s not rendering/displaying. Logs showing no errors, any idea why?

Page name:

 ![](https://us1.discourse-cdn.com/wix/original/3X/8/1/811162efa790455eceebd0382abd7b2b1b23e47d.png)

Code file names:

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

Content matching sample page:

 ![](https://us1.discourse-cdn.com/wix/original/3X/9/9/99ba91f0dfcaeed05c4c78f304337ad78d6cf1e3.png)

 ![](https://us1.discourse-cdn.com/wix/original/3X/3/a/3a5f324caf2706ba44b179469b8e39fe886d7393.png)

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

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

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [February 1, 2022, 12:19pm UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607/2 "2022-02-01T12:19:16Z")

</div>

Refer to [this thread](https://www.wix.com/velo/forum/coding-with-velo/chart-js-killing-me-softly) .

---

<div class="post-metadata">

**Author:** ![spamushere](https://avatars.discourse-cdn.com/v4/letter/s/df705f/32.png) [@spamushere](https://forum.wixstudio.com/u/spamushere)\
**Post date:** [February 1, 2022, 12:29pm UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607/3 "2022-02-01T12:29:04Z")

</div>

Thanks Yisrael, sorry for my ignorance, but how does one load the CDN header scrips, would this mean configuring the chart in some other way?

:

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

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [February 1, 2022, 1:28pm UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607/4 "2022-02-01T13:28:51Z")

</div>

@spamushere I’m not familiar with the chart.js package. You should able to refer to the documentation to find out how to import via the CDN. You shouldn’t need any different configuration. The difference would be instead of using the NPM library, you will import that library via the CDN.

Perhaps [Amanda](https://www.wix.com/velo/profile/amandagm/profile) can share how she did this.

---

<div class="post-metadata">

**Author:** ![amandam](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/amandam/32/79539_2.png) [@amandam](https://forum.wixstudio.com/u/amandam)\
**Post date:** [February 1, 2022, 1:58pm UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607/5 "2022-02-01T13:58:02Z")

</div>

@spamushere Hello! To get the velo example code running, I tested with an older version of ChartJS. To try different versions, you can do an internet search for chartJS CDN.

I tested with version 2.9.4 but that is quite old so you may want to look at some of the 3+ versions.

Once you have a version you like want to test, complete the following steps:  
Uninstall the NPM package  
In chart.js remove the NPM import statement

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

```

In your dashboard navigate to settings \> Custom Code  
Add the CDN scripts (adj the version number…):

```javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" media="all">

```

Link the script to the pages it should load on  
Mark the script as essential  
Load the script in the head.

I made no other changes to the example code so this should work to get you started. Let me know how it goes.

---

<div class="post-metadata">

**Author:** ![spamushere](https://avatars.discourse-cdn.com/v4/letter/s/df705f/32.png) [@spamushere](https://forum.wixstudio.com/u/spamushere)\
**Post date:** [February 3, 2022, 1:22pm UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607/6 "2022-02-03T13:22:09Z")

</div>

Thanks, still not rendering on my end, no errors in the console in preview, but on the live site I get this error:

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

---

<div class="post-metadata">

**Author:** ![spamushere](https://avatars.discourse-cdn.com/v4/letter/s/df705f/32.png) [@spamushere](https://forum.wixstudio.com/u/spamushere)\
**Post date:** [February 3, 2022, 1:24pm UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607/7 "2022-02-03T13:24:10Z")

</div>

I tried V 2.9.4 as in your snippet, I also tried 2.9.0, 2.8.5

---

<div class="post-metadata">

**Author:** ![amandam](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/amandam/32/79539_2.png) [@amandam](https://forum.wixstudio.com/u/amandam)\
**Post date:** [February 3, 2022, 1:52pm UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607/8 "2022-02-03T13:52:03Z")

</div>

@spamushere Did you complete this step? You need to REMOVE the import statement. Can you share your url to your site?

Once you have a version you like want to test, complete the following steps:  
Uninstall the NPM package  
In chart.js remove the NPM import statement

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

```

---

<div class="post-metadata">

**Author:** ![brainstorrrm](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/brainstorrrm/32/7052_2.png) [@brainstorrrm](https://forum.wixstudio.com/u/brainstorrrm)\
**Post date:** [March 6, 2022, 6:20am UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607/9 "2022-03-06T06:20:53Z")

</div>

I just tested the Velo example here:

> **[Chart.js Custom Element](https://www.wix.com/velo/example/chart.js-custom-element)**
>
> This example demonstrates how to use custom elements (web components) to implement a chart of countries and votes per country.

Clicked the blue “Edit Now” button and the example chart loads fine.  
Click Preview, and the chart has full functionality.  
The example is a bit overly complex, using npm, etc.

**When I used chartjs I have everything that is needed in the HTML iframe.**  
I just made this chartjs chart last week:

[https://www.financestrategygroup.com/services2](https://www.financestrategygroup.com/services2)

You can also use any other js charting APIs.  
Here is an amCharts chart:

[https://www.financestrategygroup.com/services-4](https://www.financestrategygroup.com/services-4)

And here is an embedded Gapminder chart:

[https://www.financestrategygroup.com/services-3](https://www.financestrategygroup.com/services-3)

Consider placing the chartsjs call in the header of the iFrame:

```javascript
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <title>Some chartjs chart</title>
  <!-- This line below makes chartjs available in any script in this iFrame --> 
  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script> 
</head>

<body>

<style> ... CCS styling here ... </style> 

<div id="chart-wrapper">
  <canvas id="myChart" width="800" height="600"></canvas>
</div>

<script>
function initChart() {
  myChart = new Chart(ctx, {
    type: 'bubble',
    options: { ....
...
</script>
</body>
</html>

```

2.9.3 should work fine for most purposes, except floating bar charts.

Note the different URLs available:

```javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"</script> 

```

---

<div class="post-metadata">

**Author:** ![brendadavisdesigns](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/brendadavisdesigns/32/30294_2.png) [@brendadavisdesigns](https://forum.wixstudio.com/u/brendadavisdesigns)\
**Post date:** [February 6, 2023, 6:25pm UTC](https://forum.wixstudio.com/t/chart-js-not-rendering-on-editor-x/7607/10 "2023-02-06T18:25:19Z")

</div>

I faced the same issue, but i have fixed it.

https:// scribehow . com / shared/Wix\_Workflow\_\_mEA4-ka6RyehKU-56xqN2w