Getting Started with CanvasJS StockChart React Component

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

Install CanvasJS React StockChart package to your application via NPM by running the following command.

npm install @canvasjs/react-stockcharts

3. Import CanvasJS React StockChart

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

import CanvasJSReact from '@canvasjs/react-stockcharts';
//var CanvasJSReact = require('@canvasjs/react-stockcharts');

var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart;

Once the package is imported, you are ready to go. Now you can add CanvasJSStockChart component with stockchart-options & container-style 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.

  Also See:    

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