Reply To: CanvasJS npm package for React

[Indranil Deo]

@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