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?
can I install an Chart.js v2.9.3 to solve this issue ?
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);
Hi everyone, Thanks for your patience! The Chart.js example is fixed. Please let us know if you have any problems.
Mine is not working either. Not preview nor live and I replicated the example perfectly.
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!