Getting Started with CanvasJS StockChart React Component

CanvasJS StockChart React Component can be easily integrated into your React 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 StockChart Component.

  1. You no longer have to call render() method during the initial render. You need to call render() only when StockChart options change.
  2. 2. You can get reference to the StockChart instance by passing onRef = {ref => this.stockChart = ref} props to the component. This allows you to access all StockChart properties and methods including render().
  3. You can set styling properties to the StockChart container by passing containerProps while creating StockChart.
  4. 4. Once you get reference to the StockChart object, you can update any of the options – like stockChart.options.animationEnabled = true and call stockChart.render(). Refer Updating StockChart 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 StockChart React Files in your app

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

3. Import CanvasJS StockChart React Component

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

import CanvasJSReact from './canvasjs.stock.react';
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart;

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

class App extends Component {
  render() {
    const options = {
      title: {
          text: "CanvasJS StockChart"
      },
      charts: [{
          data: [{
            type: "line",
            dataPoints: [
	      { x: new Date("2018-01-01"), y: 71 },
	      { x: new Date("2018-02-01"), y: 55 },
	      { x: new Date("2018-03-01"), y: 50 },
	      { x: new Date("2018-04-01"), y: 65 },
	      { x: new Date("2018-05-01"), y: 95 },
	      { x: new Date("2018-06-01"), y: 68 },
	      { x: new Date("2018-07-01"), y: 28 },
	      { x: new Date("2018-08-01"), y: 34 },
	      { x: new Date("2018-09-01"), y: 14 },
	      { x: new Date("2018-10-01"), y: 71 },
	      { x: new Date("2018-11-01"), y: 55 },
	      { x: new Date("2018-12-01"), y: 50 },
	      { x: new Date("2019-01-01"), y: 34 },
	      { x: new Date("2019-02-01"), y: 50 },
	      { x: new Date("2019-03-01"), y: 50 },
	      { x: new Date("2019-04-01"), y: 95 },
	      { x: new Date("2019-05-01"), y: 68 },
	      { x: new Date("2019-06-01"), y: 28 },
	      { x: new Date("2019-07-01"), y: 34 },
	      { x: new Date("2019-08-01"), y: 65 },
	      { x: new Date("2019-09-01"), y: 55 },
	      { x: new Date("2019-10-01"), y: 71 },
	      { x: new Date("2019-11-01"), y: 55 },
	      { x: new Date("2019-12-01"), y: 50 }
	  ]
         }]
      }],
      navigator: {
        slider: {
          minimum: new Date("2018-07-01"),
          maximum: new Date("2019-06-30")
        }
      }
    };
    const containerProps = {
      width: "80%",
      height: "450px",
      margin: "auto"
    };
    return (
      <div>
        <CanvasJSStockChart
          options={options}
          containerProps = {containerProps}
          onRef={ref => this.stockChart = ref}
        />
      </div>
    );
  }
}


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

Refer to the StockChart Options section for complete list of options available. Also refer to Updating StockChart Options / Data section for tutorial on updating StockChart dynamically.





If you have any questions, please feel free to ask in our forums.