CanvasJS with vuejs using webpack

[Jeff]

Hi,
Could you please create a CanvasJS vue sample app using vue-cli? It uses webpack and is how I’ve built my app. I’m unable to get CanvasJS to load. I’ve tried all the suggestions in the forum and the existing sample app. From what I understand, it’s because canvasjs.min.js does not implement ES6 modules.
See https://cli.vuejs.org/
Thank you.

[Manoj Mohan]

@jeff,

Please take a look at this sample project for integrating CanvasJS Charts with Vuejs-cli.

—-
Manoj Mohan
Team CanvasJS

[Jeff]

@manoj-mohan,
Thanks for the quick response. It didn’t fix my problem, but at least it let me know what my problem wasn’t. I was able to figure out what the issue was through trial and error. It seems to be a conflict with Prettier.
Replicate like this:
vue create pretty
Manually select features.
To keep things simple as possible I selected only “Linter / Formatter”
When prompted to pick a linter, select ESLint + Prettier
I kept the defaults for the rest. Here’s the summary for the create command:
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

Then I copied the ChartComponent.vue file and canvasjs.min.js from your sample into the project and added the ChartComponent to App.vue, placing it right after the HelloWorld component in the template.

When I run “npm run serve” or “npm run build” the process locks up. Ctr-C does not even kill it. I have to go to task manager to kill the node.exe process that was launched.

Everything works fine if I repeat this process, but select “ESLint with error prevention only” at the “Pick a linter” step.

I was able to remove Prettier from my main project and display your CharComponent, so I’m good for now. If you get a chance to look at this closer and see a fix, let me know.
Thanks,
Jeff

[danb4r]

I managed to make canvasJS to work on Quasar (Vue+Webpack) using this sample project from @manoj-mohan. CanvasJS only worked inside a component, not inside the MainLayout.vue.

• This reply was modified 4 years, 5 months ago by danb4r.

[Manoj Mohan]

@danb4r,

Can you kindly create a sample project reproducing the issue you are facing on adding CanvasJS in MainLayout.vue and share it over Google-Drive or Onedrive so that we can run it locally to understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[danb4r]

@manoj-mohan, unfortunately my project is huge and has private code from my client, so I will not be able to share it this time. What I can tell is that for CanvasJS work with Quasar.dev, I putted CanvasJS in a separate component and did the following:

Added canvasjs.min.js to /src/assets/canvasjs.min.js:

var CanvasJS = require('src/assets/canvasjs.min.js')

CanvasJS = CanvasJS.Chart ? CanvasJS : window.CanvasJS

Quasar automagically replaces ‘src/..’ with the correct path for webpack.

Also, I had to correct the canvasjs.min.js lint comments, as the linter requires spaces after /* and befor */. I suggest you guys test the lib on Quasar, as it is a more and more adopted framework.

Also, as a performance measure, I declared all Canvas variables outside of the “export default { }”, as they do not need to be reactive in my project, as my data source is an Axios service.

Apart from these measures, I followed your example above for Vue.js.

[Manoj Mohan]

@danb4r,

Thanks for your suggestion. We will improve it in future versions.

—-
Manoj Mohan
Team CanvasJS