Getting Started with CanvasJS React Component

Due to the increasing popularity of React in web application development, we thought of creating a React Component for CanvasJS Charts. This allows you to seamlessly integrate CanvasJS Charts into your React based Applications. Below is how you can get started with the same.


In case you have any suggestions/feedback please post it in our forum.


Here are couple of things that you need to remember while using React Chart Component.

  1. You no longer have to call render() method during the initial render. You need to call render() only when chart options change.
  2. You can get reference to the chart instance by passing onRef = {ref => this.chart = ref} props to the component. This allows you to access all chart properties and methods including render().
  3. Once you get reference to the chart object, you can update any of the options – like chart.options.data[0].type = “column” and call chart.render(). Refer Updating Chart Options / Data for more information.

Step-By-Step Instruction

1. Create a React App

As a first step, create a react app. Refer documentation on Creating a New React App for more info.

2. Save CanvasJS React Files in your app

Save canvasjs.react.js and canvasjs.min.js within source-folder of your React application ( src or src/assets or src/lib )

3. Import CanvasJS React Component

Before creating chart, you need to import the component ( from canvasjs.react.js ) to your app.

var CanvasJSReact = require('./canvasjs.react');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

Once the component is imported, you are ready to go. Now you can Add CanvasJSChart component with chart-options as props. You can get reference to the chart instance via an onRef event handler.

class App extends Component {	
  render() {
    const options = {
      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  }
                ]
       }]
   }
		
   return (
      <div>
        <CanvasJSChart options = {options}
            /* onRef = {ref => this.chart = ref} */
        />
      </div>
    );
  }
}


Note:
  • React requires polyfills to run on older browsers such as IE 9 and IE 10.

Have a look into our reference section for complete set of options that are available. In order to make it simpler we have also created various examples, please check React Chart Gallery for the same.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.