VueJs Web Component build

[ndoulgeridis]

I am trying to build a chart using VueJS web component:

vue-cli-service build --target wc --inline-vue --name my-app ./src/App.vue --env=production

This command produces the following files on dist:

However when I see dist.html on the browser I get:

I suspect the problem is with shadow dom:

When it tries to get the element to render the chart it fails due to shadow dom VueJS WC build produces.

When run yarn serve app is working fine but does not produce shadow DOM:

Do you think shadow DOM bugs fusion charts? Is there a workaround? Do I miss something there?

[AyanBhadury]

@ndoulgeridis FusionCharts needs a container to render the charts, since it's not getting the container hence the error is showing.

[ndoulgeridis]

There is a container but when I build using --target wc it creates a shadow-root and this container is part of shadow dom

I think this causes the problem then on render because the container with ID fc-2 cannot be found normally because it's part of Shadow DOM and not a normal element.

If I run for example yarn serve I see the same HTML structure but without shadow-root and it works fine.

So what I understand is fusion charts are not compatible when you try to render them in an element that is part of shadow dom.

Is there a workaround?

[AyanBhadury]

not that I can think of immediately, if you are looking for server-side rendering you can check out FusionExport, for FusionCharts make sure the dom node is present where the chart will render.

[raman-nareika]

hi, faced the same issue: fusioncharts can't find the container within shadow dom. @ndoulgeridis any solutions?

[ndoulgeridis]

No, I migrated to another library

[AyanBhadury]

@raman-nareika which version by vue are you using if its vue2 use vue-fusioncharts 3.1.0
If you are using vue3 use vue-fusioncharts 3.2.0

[raman-nareika]

@AyanBhadury we use v3.1.0

[AyanBhadury]

@raman-nareika Working Demo. : https://codesandbox.io/s/multi-level-pie-9q48h?file=/src/App.vue

[raman-nareika]

@ndoulgeridis found a solution:

FusionChart.vue

<template>
  <div id="chart-container"></div>
</template>
<script>
export default {
  props: {
    chartType: {
      type: String,
      required: true
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "400"
    },
    dataSource: {
      type: Object,
      required: true
    }
  },
  data: () => ({
    dataFormat: "json"
  }),
  mounted() {
    this.render();
  },
  methods: {
    render() {
      const fusionChart = new FusionCharts({
        type: this.chartType,
        width: this.width,
        height: this.height
      });

      fusionChart.setJSONData(this.dataSource);
      fusionChart.render(this.$root.$el.querySelector("#chart-container"));
    }
  }
};
</script>

So, you can use the component above and inject dataSource via props, e.g. <FusionChart chart-type="doughnut2d" :data-source="dataSource" />