1. Feedback
  2. Vue
  3. 28267

Welcome to the Vue feedback portal. We’re happy you’re here! If you have feedback on how to improve the Vue, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Use Chart with Vue3 in component

Dear Sir or Madam,

Today I tried to setup a first demo project using SyncFusion Chart with Vue3. It worked fine in the first place, but then I encountered a weird problem, hopefully you can help me out.

I set up the dependencies as shown in the web:

"dependencies": {
"@syncfusion/ej2-base": "^19.2.57",
"@syncfusion/ej2-vue-charts": "^19.2.57",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-rc.1"
},

Then I put the following code into App.vue:

<template>
<ejs-chart width='800px' height='500px' :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='month' yName='sales' name='Sales'> </e-series>
</e-series-collection>
</ejs-chart>
</template>

<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, Legend, Category } from "@syncfusion/ej2-vue-charts";

export default {
name: 'About',
components: {
'ejs-chart' : ChartComponent,
'e-series-collection' : SeriesCollectionDirective,
'e-series' : SeriesDirective
},
data() {
return {
primaryXAxis: {
valueType: 'Category'
},
seriesData: [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
],
title: "Sales Chart"
}
},
provide: {
chart: [ LineSeries, Legend, Category ]
}
}
</script>

This works fine and I get the following output in the browser:

Empty

However, if I move the very same code shown above from App.vue into a separate component called About.vue and then inject that component into App.vue like this:

<template>
<about/>
</template>

<script>
import About from "./components/About.vue"

export default {
name: "App",
components: {
About
}
}
</script>

Then it doesn’t work anymore. No output is shown in the browser and I get the following error message in the browser console:

Empty

Do you have a glue what I’m doing wrong? It must be some very basic issue, however I couldn’t find any solution in the internet. I hope you can help.

Thank you!

Kind regards

Christian