Added the components needed (public elements, node module chart.js v2.9.3 MIT) to create chart from the example at https://www.wix.com/corvid/example/chart.js-custom-element
The collection is reading and returning data set (logged to console) but the graph does not display. No errors being logged. Has anyone got this working?
Hello.
I have checked the live site? If not please publish your site and see.
We had an issue we had to hard code the block CSS and this works only on the live site.
Good luck!
Mine is not working either. Not preview nor live and I replicated the example perfectly.
Hi everyone,
Thanks for your patience! The Chart.js example is fixed. Please let us know if you have any problems.
Hi,
Mine is only working when I refresh the page. Can someone please help?
Seems like the data is loaded to the element before the element itself is ready.
import Chart from ‘chart.js’ ;
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: 100%” );
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: ‘line’ ,
data: this .chartData,
options: {
maintainAspectRatio: false ,
scales: {
xAxes: [{
ticks: {
beginAtZero: false ,
}
}],
yAxes: [{
ticks: {
beginAtZero: false
}
}]
}
}
});
}
}
window.customElements.define( ‘chart-elem’ , ChartElem);
The example does not seem to work with the latest chart.js version. Is there an update?
@lymba Thanks for letting us know. We’ll look into it and get back to you.
@lymba you can delete the npm and reinstall the new npm version (v3.4.1)
@marlowe-shaeffer Would you be able to advise on this issue, please? I’m trying to use the example also but I think there may be an issue with the version of chart.js npm.
If I use the example, it works, but, if I delete the chart.js module and then reinstall it, the data doesn’t display on the example site (this is what I’m experiencing on my site after the initial install)
Thanks!
Yes i have the same problem. I have already asked support whether there is an option to install an older version of the chart npm. So far there doesn’t seem to be a solution. I assume that the problem is already being dealt with.
can I install an Chart.js v2.9.3 to solve this issue ?
You can test doing it that way, but you would need to install chartJS from a CDN instead of using the NPM package to have control over the version. To add a script to the header for the CDN, you can place this in custom code in your dashboard settings.
I am closing this post as it is quite old. If you have specific issues with your code as you begin working on integrating the library please start a new thread.