I am trying to use canvasjs in a webpack-based project.
I import canvasjs via code below
But there is an error of “Uncaught ReferenceError: chart is not defined” when code below is executed:
b && (chart = this.chart || this, chart.render())
It occurs when I execute code below:
chart2.title.set('fontSize', chart1.title.get('fontSize'), true)
It seems canvasjs.min.js is not in “use strict” mode, but it is now running in a “use strict” context.
We are working on it and will get back to you at the earliest.
Suyash, any update on this? I’m also running into issues with webpack.
Thanks! Sorry for the late reply.. I did not set up notifications for emails on the post.
I tried the internal build and ran into the same issue: CanvasJS is not defined.
Do you have an example of a webpack config that is working for you all?
I was able to get this working with WebPack now!
Thank you so much–I will be on the lookout for the official push of this build in the future.
Glad it’s working. Thanks for letting us know.
Thank you for the quick reply! I found the react example already actually and that is what I am currently trying to adapt to my VueJS project.
Honestly I don’t fully understand how it works in the React project. Maybe that’s just because I don’t really know React yet.
Anyway what I have tried to do so far is copying in the
./src/client/public/canvasjs.js file from that project into mine and then put the following line in my .vue file that I need it in:
const CanvasJS = require('../assets/js/canvasjs.js')
The result is that the CanvasJS variable is successfully created as an es6 module but doesn’t have the chart constructor defined in it.
We really love how fast and responsive CanvasJS is, it is unquestionably the highest performing charting library we have looked at and that is what we need.
However, we need a product that isn’t a nightmare to implement in webpack + VueJS.
We also noticed that there is an unofficial npm package. This might help us but we wouldn’t want to pay for a license and then still not be supported because we are using an unofficial package.
So if you can do one of the following by early next week, we can stick with you as our first choice:
1. Give us an example which helps us (easily) implement the CanvasJS library into a webpack + VueJS setup
2. Tell us that you are already making an official npm package that will be out relatively soon. In which case we could try using the third party one until yours is ready.
No matter what happens, thank you for your time. We really appreciate the help!
We currently have plans of building and publishing npm package. However as of now we would be publishing trial version in npm, as trial and commercial versions are 2 different packages. And you can download the commercial version from My Account page and replace the module.
Thank you for getting back to us so fast!
That’s great news but, this brings up new concerns. The trial version would be nice and easy to use since it’s available through NPM but if the commercial version isn’t, then we have to manually install it when we deploy. This would become annoying especially if the package has any dependencies because we wouldn’t have the package manager to resolve dependencies.
I’m not necessarily saying it’s a deal breaker but ease of use is very important because we plan on using whichever graphing library we choose in multiple projects.
Also, when do you think the npm package(s) will be ready?
We have just released v2.1 with module import/export with which you can easily integrate front-end framework like React, Angular, Vuejs, etc. Please refer to the release blog for more information. Do download the latest version from our download page and let us know your feedback.
You must be logged in to reply to this topic.