Chart.js not rendering on editor X?

Ask the community
,
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>