Home forums Using CanvasJS Can canvasjs work with webpack

This topic contains 13 replies, has 6 voices, and was last updated by  Indranil Deo 3 weeks, 2 days ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #14821

    yueming
    Member

    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.

    #14860

    Suyash Singh
    Moderator

    @yueming,

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

    ___
    Suyash Singh
    Team CanvasJS

    #15612

    Austin
    Member

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

    #15618

    Vishwas R
    Keymaster

    @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

    #15758

    Austin
    Member

    @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?

    #15768

    Austin
    Member

    @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

    #15774

    Vishwas R
    Keymaster

    Austin,

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


    Vishwas R
    Team CanvasJS

    #19805

    jgurtz
    Member

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

    #19808

    Vishwas R
    Keymaster

    @jgurtz,

    Here is an example of 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

    #19817

    jgurtz
    Member

    @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.

    #19854

    jgurtz
    Member

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

    #19857

    Vishwas R
    Keymaster

    @jgurtz,

    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.


    Vishwas R
    Team CanvasJS

    #19863

    jgurtz
    Member

    @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?

    #20165

    Indranil Deo
    Member

    @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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.