[Vuejs]-Unable to find the container dom element fusion chart

by

0👍

A quick look at the package’s docs and I couldn’t dins anything about your "renderAt" property. Maybe try omitting this property?

0👍

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

You have to provide a chart container inside your page. Normally it is a div. You have already provided the chart container id as "chart-1" inside the constructor parameter. So adding the following div to the page will solve the problem

    <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" />

Leave a comment