Can anyone get the example from https://www.wix.com/corvid/example/chart.js-custom-element to work? I have premium Wax without any ads. Followed the example perfectly. Console log on data is looking fine but nothing shows up. Can anyone get it to work? I feel like its a detour to install chartjs nom rather than just embed an iframe with html code.
1 Like
Hi Peter,
Thanks for letting us know. Weāve heard a few complaints recently about this example, so weāre investigating. Stay tuned!
Hi Marlowe,
Thanks for the reply. I am working on it as well. I think it might be a permission issue with the custom element itself because the error: ātypeerror: attempted to assign to readonly propertyā is reproducible on three points:
- Front-end page code
- Public ācustom-elementsā: chart.js
- Public: chart-api.js
This is a screenshot of the error I get and a link to my website https://www.nordicelysium.com/members.
Please let me know if there is anything else I can because we are very much depending on chart.js
p.s I tried your āHello Worldā example and it works so maybe render?
Any news on this. Thanks for the help! I need to know how to make it work
The fix is a bit more complex than anticipated, and weāre still looking into it. Thanks for your patience!
Updateāweāre still working on fixing the chart example. Hopefully weāll have it resolved soon. Sorry for the delay!
I started with that sample and it failed:
https://www.wix.com/corvid/forum/community-discussion/solved-charts-js-floating-bars?origin=member_posts_page
Got the charts working - chart.js works fine with Corvid.
Any news by any chance?
Im working with dynamic charts alright, using Chart.js and some plugins.
What I did was place an HTML element in the editor, copy paste the HTML code from the example*, and from there I played with it, understood it, and now its ok.
*To get the html code, you can open the example in the editor, click in the HTML example element, copy the code inside settings, and paste it in notpad++, inspect it, and then put your own code in to your own HTML element
@miguelhongo90 Thanks soo much for replying! Iām honestly having a really difficult time with this. Iāve been trying to get my data collection to interact with my graph but I just canāt seem to figure it out. The chart has yet to show up. Is there any way you could elaborate a little or maybe post an example? Iāve tried manipulating the api and chart.js code and iāve made sure my element idās are all matched. Iād appreciate any response. Thank you!
The example works now!
I canāt get this to work. If anyone can elaborate on what they did I would really appreciate it!
Hereās what Iāve done:
- I copied all code verbatim into js files as described, same names and all.
- Created the custom element, adjusting the ID to match (#CustomElement1), changed source to ācharts.jsā and tag to āchart-elemā.
- Loaded charts.js package from npm (v3.6.0)
- Adjusted the query for my data source. My data comes from arrays returned from one of my back-end functions, but the result is essentially the same: a number array, an array of labels, and an array for background color and border color). Console logs the data as expected.
The chart still does not render.
There is a line in charts.js:
if ( this . _connected )
this . render ();
Am I missing something to connect the element? Did I lose something by sourcing data from a back-end function instead of a query as in the example?
Thanks!
I have EXACTLY the same issue and have done EXACTLY the same process as you have (except I have upgraded to v3.7.0) . I am getting the following console error log.
chart.js:50 Uncaught TypeError: e.default is not a constructor
at h.value (chart.js:50:19)
at h.value (chart.js:44:9)
at chart.js:71:23
at chart.js:71:44
value @ chart.js:50
value @ chart.js:44
(anonymous) @ chart.js:71
(anonymous) @ chart.js:71
here is the snippet of chart.js code with line 50 highlighted:
render () {
const ctx = this . _shadow . getElementById ( āmyChartā ). getContext ( ā2dā );
const myChart = new Chart ( ctx , {
type : ābarā ,
data : this . chartData ,
options : {
legend : {
labels : {
The data is coming back from my DBās ok, all is good except for rendering. When I run the example provided (using the āEdit Nowā button in the example) it all works fine, but when I put it into my published siteā¦no bueno. I REALLY need this functionality. Any suggestions (from anyone?)
Hello. The latest version of ChartJS (released December 2021) likely has introduced a breaking change in the code. I wasnāt able to get the example code working with v3.7.0 today and I have to stop messing with it for now, but I was able to get the example chart to render as expected by using an older version of ChartJS.
To do this, I removed the NPM package and loaded the CDN version in by adding header scripts in settings.
If you have time, I would review the ChartJS docs and forums to see if you have better luck tracking down the breaking change than I did.
Thanks Amandaā¦I will give this a try.
@jjohnson4him See if you can get this instructional working, it failed for me
https://www.wix.com/velo/forum/coding-with-velo/chart-js-not-rendering-on-editor-x
@jjohnson4him Any luck?
Thanks Amanda.
Getting charts working on my site has been the most frustrating part of my Wix/Velo experience for the past 4 months. Granted, I am not a pro developer but I have not encountered any other issues that I havenāt been able to figure out relatively quickly, and I have been very happy with Wix/Velo overall.
Is this something that you and your team can elaborate on with more functional examples & documentation?
I am trying to implement charts to display user performance trends on my math trainer website. Hereās a link to the page I am using to experiment with charts.
https://www.zeramath.com/chartjs.
Thanks for the help!
@mpichora Hello. A few thingsā¦
The error you are getting is from chart.js and we have no control over it. You can tell by looking at the console and clicking on the file throwing the error.
This means that chart.js is set up incorrectly. If you used the example that is currently out of date due to a ChartJS update that included breaking changes which we cannot control, then you will need to follow the steps I provided for how to revert to a previous version of chartJS (remove the NPM package and instantiation and swap to using header scripts) or, if you want to use their updated version you will want to visit their documentation and follow the examples they have provided.
Here is the post where I walked through the steps in more detail
Now, to help with your exact scenario if you are having trouble, would you please do the following:
Start a new post with your issue and show all your code including where you replaced the script in the head (if you are trying to revert to an older version)
Tell us anything you have already tried - so you get new suggestions.
I am closing this post because it is very old and getting messy but if you are still having issues, please open a new one.
On my end, I will look into having that example taken down for now as it is clearly confusing since it broke due to a ChartJS update. When we release examples for third party tools, we have no control over what they may do in the future with their code but I do apologize that itās confusing currently as I see the version is not explicitly listed on that example.