We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can't import the syncfusion charts package

Thread ID:

Created:

Updated:

Platform:

Replies:

147378 Sep 8,2019 08:13 PM UTC Sep 11,2019 11:03 AM UTC Vue 5
loading
Tags: Chart
Matthieu
Asked On September 8, 2019 08:13 PM UTC

Hi,
I'm trying to import a chart component inside one of my projects and I always get this error:
Module not found: Error: Can't resolve '@syncfuion/ej2-vue-charts' in '/mnt/Data/Dev/Web-Development/testcharts/src'

I tried to start from scratch in a tempory project while following the documentation but I got the same error. I'm using webpack so I guess this is an issue inside of the configuration files but I don't know how to fix it (still new at this even if I have some experiences in other languages).

Thanks for the help

Bhuvanesh Valarman [Syncfusion]
Replied On September 9, 2019 12:15 PM UTC

Hi Matthieu, 

Greetings from Syncfusion.  
  
We have analyzed your query. From your provided information we suspect that “@syncfusion/ej2-vue-charts” package not installed properly in your project. Try to install Vue chart packages using this command “npm install @syncfusion/ej2-vue-charts --save” also refer this Getting started with chart  for more details.  

Kindly revert us, if you have any concerns.  
  
Regards, 

Regards, 
Bhuvanesh V. 


Matthieu
Replied On September 9, 2019 04:10 PM UTC

Hi,
Thanks for your quick response. I just tried what you told me while following exactly the documentation steps, and still not working. I guess it's because I don't know how and where to put this: "Syncfusion ej2-vue-charts packages needs to be mapped in systemjs.config.js configuration file".
As I don't have this file in my webpack package. 
Please find attached my package.json file and webpack file.

Thanks for your help

Edit: I started again from a new empty project from scratch, and it seems to have worked. Might have been a mistypo when I imported the chart

Attachment: charts_import_fe05e4a.zip



Kesavan Muthusamy [Syncfusion]
Replied On September 10, 2019 11:58 AM UTC

Hi Matthieu, 

Sorry for inconvenience caused.  

We have replaced your package.json and webpack files in our vue-cli project. It is working fine in our end. Please ignore the systemjs configurations in the documentation. We have prepared  a sample with the package.json and webpack.config.js which you had shared.  

Sample link: sample 

Please follow the steps to render Syncfusion Vue charts,  

  1. Install vue cli
You can use Vue CLI to setup your vue applications. To install Vue CLI use the following commands. 
npm install -g @vue/cli 
npm install -g @vue/cli-init 
 
  1. Create a vue application
Start a new Vue application using below Vue CLI command. 
vue init webpack-simple quickstartcd quickstartnpm install
  1. Adding Syncfusion Chart package
All the available Essential JS 2 packages are published in npmjs.com registry. 
To install chart component, use the following command 
npm install @syncfusion/ej2-vue-charts --save
 
  1. Registering Chart Component
You can register the chart component in your application by using the Vue.use(). 
Refer to the code example given below. 
import { ChartPlugin } from '@syncfuion/ej2-vue-charts';Vue.use(ChartPlugin);

5.       Adding Chart Component

·                    Add the Vue Chart by using <ejs-chart> selector in <template> section of the App.vue file. 
·        
Code snippet: 
App.vue file 
 
<template> 
 <ejs-chart></ejs-chart> 
</template> 
 
<script> 
import Vue from 'vue'; 
import { ChartComponent, ChartPlugin } from '@syncfusion/ej2-vue-charts'; 
 
Vue.component(ChartPlugin.name, ChartComponent); 
export default { 
  name: 'app', 
  data () { 
    return { 
      msg: 'Chart' 
    } 
  } 
} 
</script> 
 
 
Output screenshot:  
 

Please let us if you have further assistance on this 

Regards, 
Kesavan 



Matthieu
Replied On September 10, 2019 12:04 PM UTC

Hi,
Thanks for your help. It is now working, after following all your steps that you descrbibed on the post before.
I compared this project with mine which wasn't working, and it seems that the issue which was causing it was a simple typo error in the module name.
Thanks a lot for your help

Bhuvanesh Valarman [Syncfusion]
Replied On September 11, 2019 11:03 AM UTC

Hi Matthieu 

Thanks for your update. 

Kindly revert us, if you need further assistance. 

Regards, 
Bhuvanesh V. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon