Can canvasjs work with webpack

[yueming]

I am trying to use canvasjs in a webpack-based project.

I import canvasjs via code below

import '../third/canvasjs/canvasjs.min';

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.

[Suyash Singh]

@yueming,

We are working on it and will get back to you at the earliest.

___
Suyash Singh
Team CanvasJS

[Austin]

Suyash, any update on this? I’m also running into issues with webpack.

[Vishwas R]

@austin,

We have fixed the issue and here is an internal build for the same. Kindly download the fixed version and let us know your feedback.

—
Vishwas R
Team CanvasJS

[Austin]

@Vishwas

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?

[Austin]

@vishwas

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.

Thanks,
Austin

[Vishwas R]

Austin,

Glad it’s working. Thanks for letting us know.

—
Vishwas R
Team CanvasJS

[jgurtz]

@Austin
@vishwas

I am struggling to get CanvasJS working with webpack (and VueJS). I know it has been a while since this thread has been active, but any info or examples you could provide would be much appreciated.

Please feel free to email me directly at joel.geurts@getfreepoint.com

Thanks!

[Vishwas R]

@jgurtz,

CanvasJS Charts & StockChart can be easily integrated with Webpack & React, Angular, Vue.js, etc. Please take a look at this JSFiddle for an example on integrating CanvasJS Chart in VueJS.
.
We don’t have a ready sample for Webpack with VueJS, but we will work on it and get back to you at the earliest. Meantime please take a look at this sample project for CanvasJS Charts with React & Webpack.

—
Vishwas R
Team CanvasJS

[jgurtz]

@vishwas

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.

[jgurtz]

@vishwas

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
OR
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!

[Vishwas R]

@jgurtz,

We don’t have official npm package as of now. However you can add CanvasJS Charts / StockCharts to your React/Angular/Vue.js app easily. Please follow the below instructions for the same.
1. Save CanvasJS script in your project source folder (src or src/assets or src/lib)
2. Import the script to your app (Please note to mention file path properly, if you have saved library in different folder like src/assets or src/lib)
For Charts: import * as CanvasJS from './canvasjs.min';
For StockCharts: import * as CanvasJS from './canvasjs.stock.min';

If you have license, you can download the commercial version of CanvasJS from My Account.

—
Vishwas R
Team CanvasJS

[jgurtz]

@vishwas

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?

[Indranil]

@jgurtz,

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.

___________
Indranil Deo,
Team CanvasJS

[jkeith]

I found I needed to fiddle with my Webpack config a bit to get something working. In case it helps somebody else, this is what worked for my React app…

1. Copied canvasjs.min.js and canvasjs.react.js to a new folder at the root called “assets”
2. Installed some babel stuff “npm install –save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties”
3. Modified my webpack.config.js to use babel to load canvasJS files
`
{
test: /\.js$/,
include: [
path.resolve(__dirname, ‘assets’),
],
use: {
loader: ‘babel-loader’,
options: {
presets: [
[‘@babel/preset-env’, { targets: “defaults” }],
“@babel/preset-react”
],
“plugins”: [
“@babel/plugin-proposal-class-properties”
]
}
}
},
`

I’m not entirely sure all of the babel setting are correct or necessary, but I found it to work via trial-and-error so I’m likely to keep it as-is. I hope this helps.

• This reply was modified 3 years, 7 months ago by jkeith.
• This reply was modified 3 years, 7 months ago by jkeith.