Chart.js not rendering on editor X?

Ask the community
,
1

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:

Code file names:

Content matching sample page:

1786×1108 151 KB

1790×1314 255 KB

1534×558 27.1 KB

1840×1248 291 KB

2

Refer to this thread .

3

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?

:

1416×772 91.6 KB

4

@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 can share how she did this.

5

@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

import Chart from 'chart.js';

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

<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.

6

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

1462×334 75.1 KB

7

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

8

@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

import Chart from 'chart.js';
9

I just tested the Velo example here:

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

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

https://www.financestrategygroup.com/services-4

And here is an embedded Gapminder chart:

https://www.financestrategygroup.com/services-3

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

<!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:

<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>
10

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

https:// scribehow . com / shared/Wix_Workflow__mEA4-ka6RyehKU-56xqN2w