Home Forums Chart Support Can canvasjs work with webpack

Can canvasjs work with webpack

Viewing 15 posts - 1 through 15 (of 17 total)
  • #14821

    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

    @yueming,

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

    ___
    Suyash Singh
    Team CanvasJS

    #15612

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

    #15618

    @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.
    Colun Chart with Webpack


    Vishwas R
    Team CanvasJS

    #15758

    @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

    @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

    Austin,

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


    Vishwas R
    Team CanvasJS

    #19805

    @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

    @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.
    canvasjs chart integration with 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

    @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

    @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

    @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

    #19863

    @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

    @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

    #33840

    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 2 years, 11 months ago by jkeith.
    • This reply was modified 2 years, 11 months ago by jkeith.
Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.