Having chart inside a custom element breaks check

[tcarlsen]

I'm doing a custom element with apexcharts, but doing so makes this check fail:

if (!document.documentElement.contains(element.node)) 

on a second notice, I get this Exception is not defined when the check tries to throw this error

throw new Exception('Element not in the dom');

Just to clarify, removing this check, and chart works all fine.

[junedchhipa]

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?
Thanks.

[tcarlsen]

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);

[junedchhipa]

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.

[tcarlsen]

This ain't React. This is a normal custom element (https://developers.google.com/web/fundamentals/web-components/customelements)

[junedchhipa]

Oops! My quick look assumed it is, as it looked similar to React Class and methods names.
My bad, thanks for enlightening me 😁
I will try that

[tcarlsen]

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>

[tcarlsen]

any progress on this one? did you hear from the svg.js team?

[junedchhipa]

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
If you confirm that just that single line if (!document.documentElement.contains(element.node)) is causing the issue, then maybe we will remove that line with gulp while bundling ApexCharts.

Thanks

[tcarlsen]

It seems to be this line alone because of the chart ain't part of the document but part of shadowRoot.
removing the line with gulp could be a way I think.

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)

[junedchhipa]

I will try importing the CSS directly inline instead of attaching it to document. Not sure if it is possible with Webpack, but I will give a shot.

[tcarlsen]

As of now I have extracted the style and adding it directly to my own stylesheet.
so if there was a way to disable the style append it would be awesome!

[junedchhipa]

@tcarlsen Unfortunately, there is no easy way to disable style append in the final build file.
You will have to do a custom build of apexcharts if you want to avoid injecting CSS into the document. As removing it from the current build file and providing it as an additional import will break every existing installation.

[junedchhipa]

@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.

[tcarlsen]

Wow, beautiful! thx you so much !!!

I will keep testing having appex inside custom elements and report back to you.
Thx for an awesome tool!

[rom1504]

@tcarlsen did you ever manage to get this to work ? if so could you give a simple example that works ?

[tcarlsen]

@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."

[rom1504]

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> .