-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Having chart inside a custom element breaks check #76
Comments
ApexCharts has a dependency on SVG.js and the error you are getting is part of the SVG.js checks. I will raise an issue on svg.js and see what can be the solution to it. Can you please post the steps to reproduce the error on my side? |
import * as ApexCharts from 'apexcharts';
class CustomCharts extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.updateDom();
}
updateDom() {
this.shadowRoot.innerHTML = `
<div id="apexCharts"></div>
`;
this.RenderChart();
}
RenderChart() {
const options = {
chart: {
type: 'line',
width: 598,
height: 300
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
const apexCharts = new ApexCharts(this.shadowRoot.querySelector('#apexCharts'), options);
apexCharts.render();
}
connectedCallback() {
}
}
window.customElements.define('custom-charts', CustomCharts); |
Thank you @tcarlsen, I see that you are using React, so have you given react-apexcharts a try if it solved your issue? Let me know if you already tried that. |
This ain't React. This is a normal custom element (https://developers.google.com/web/fundamentals/web-components/customelements) |
Oops! My quick look assumed it is, as it looked similar to React Class and methods names. |
for the html: <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/custom-elements-es5-adapter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script>
<script src="charts.file.js" charset="utf-8"></script>
<custom-charts></custom-charts> |
any progress on this one? did you hear from the svg.js team? |
Hi @tcarlsen Sorry for the late response. I tried to create a codepen or codeSandbox demo before creating an issue on svg.js repo but failed to do so - https://codesandbox.io/s/z2k27n9p9m It's just a demo of the SVG element using custom-element. We are keeping apexcharts out of the question as the issue seems to be just with SVG. So, can you try creating a live demo of what you're trying? Or Thanks |
It seems to be this line alone because of the chart ain't part of the document but part of shadowRoot. Another issue I just came across is that the style element is appended to document as well. so the chart inside the custom element ain't affected by this. Is there a way to tell Apexcharts where to append the style element? (this question may need a new issue) |
I will try importing the CSS directly inline instead of attaching it to |
As of now I have extracted the style and adding it directly to my own stylesheet. |
@tcarlsen Unfortunately, there is no easy way to disable style append in the final build file. |
@tcarlsen I had to move svg.js dependency to ApexCharts /src as there are other issues arising in the core svg.js code. Until they release v3.0.0, I will have to keep track of the changes manually. I have removed that check which was causing issues in the custom element. Let me know if any more issues arise when using ApexCharts in custom elements. |
Wow, beautiful! thx you so much !!! I will keep testing having appex inside custom elements and report back to you. |
@tcarlsen did you ever manage to get this to work ? if so could you give a simple example that works ? |
@rom1504 the element I was creating got canceled, so I stopped trying. But i got it working kinda by doing as I wrote some comments back "As of now I have extracted the style and adding it directly to my own stylesheet." |
Ok I see, I'll give it a try
…On Thu, Oct 24, 2019, 09:27 Thomas Carlsen ***@***.***> wrote:
@rom1504 <https://github.com/rom1504> the element I was creating got
canceled, so I stopped trying.
But i got it working kinda by doing as I wrote some comments back
"As of now I have extracted the style and adding it directly to my own
stylesheet."
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#76?email_source=notifications&email_token=AAR437QPQSCTGAIW5VLINJTQQFE7BA5CNFSM4FTLUZWKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECEAGUY#issuecomment-545784659>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAR437XXDVE5XL72FKP3Q63QQFE7BANCNFSM4FTLUZWA>
.
|
I'm doing a custom element with apexcharts, but doing so makes this check fail:
on a second notice, I get this
Exception is not defined
when the check tries to throw this errorJust to clarify, removing this check, and chart works all fine.
The text was updated successfully, but these errors were encountered: