CanvasJS npm package for React

[allie]

Wondering whether there are any CanvasJS npm package can be used for React+Webpack.
Here we tried to install canvasjs from https://www.npmjs.com/package/canvasjs, but build failed with below info:
ERROR in ./node_modules/canvasjs/src/charts/index.js
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export SplineChart from ‘../charts/spline’;
| export ColumnChart from ‘../charts/column’;
| export StackedColumnChart from ‘../charts/stacked_column’;
@ ./node_modules/canvasjs/src/core/charts.js 40:0-61:25
@ ./node_modules/canvasjs/src/main/index.js
@ dll vendor

[Indranil]

@allie,

The package mentioned above is not official but from a third party. However, CanvasJS Chart works fine with React. Below are the steps to integrate CanvasJS Chart / StockChart in your react app.
1. Save canvasjs.react.js and canvasjs.min.js(canvasjs.stock.react.js and canvasjs.stock.min.js in case of StockChart) within source-folder of your React application ( src or src/assets or src/lib ).
2. Import the library into your app.
For Chart:
import CanvasJSReact from './canvasjs.react';
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

For StockChart:
import CanvasJSReact from './canvasjs.stock.react';
var CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart;

Once it’s imported, you are ready to go. Now you can create Chart / StockChart, pass options & render them.

Please check out React Gallery for examples on integrating charts in React app.

___________
Indranil Deo
Team CanvasJS

[allie]

Is there any solution for using CanvasJS in React+Webpack?

[Indranil]

@allie,

Please download this sample project for integrating CanvasJS in React+Webpack.

For integrating CanvasJS in React please refer to the below code snippet –

class Chart extends React.Component {
    componentDidMount() {
        var chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,
            title:{
              text: "Basic Column Chart in React"
            },
            data: [
              {
                type: "column",
                dataPoints: [
                  { label: "apple",  y: 10  },
                  { label: "orange", y: 15  },
                  { label: "banana", y: 25  },
                  { label: "mango",  y: 30  },
                  { label: "grape",  y: 28  }
                ]
              }
            ]
        });
    chart.render();
  }
  render() {
    return (
      <div id="chartContainer" style={{height: 360 + "px", width: 100 + "%"}}>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Chart />,
  document.getElementById('root')
);

Also, kindly take a look at this JSFiddle for a working sample.

___________
Indranil Deo
Team CanvasJS

[allie]

Thanks for your sample, it was helpful for me.
And could you also help provide solution for using CanvasJS in React+Webpack+Typescript, actually the check of Typescript could not support “new CanvasJS.Chart” without define “CanvasJS” first.

[Indranil]

@allie,

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

[Adithya Menon]

@allie,

We have just added CanvasJS React Chart & StockChart packages to NPM registry. Now, you can add our React chart & stockchart packages to your React application via NPM. Please refer to the release blog for more information. Please check out our NPM package and let us know your feedback.

—
Adithya Menon,
Team CanvasJS