Data Visualization using CanvasJS React Charts
Tags: canvasjs, react, charts, datavisualization
Published: 2020-06-17 08:19:43

[React](https://reactjs.org/) is one of the trendiest frameworks for building single-page UI-first applications. There are reasons for its popularity. Getting started with React is easy both for beginners and experienced developers thankfully to the supportive community and detailed documentation — it covers pretty much every aspect of working with React — from basics to advanced concepts. To start developing a web application with a high-performance presentation layer, you only need minimal knowledge of HTML and JavaScript.

### Prerequisites
  - [React](https://reactjs.org/)
  - [CanvasJS](https://canvasjs.com/)

### Installation
Updated to work with official [CanvasJS React Charts NPM](https://www.npmjs.com/package/@canvasjs/react-charts) Package

Old approach (Follow this if you are not installing package from NPM): Download [CanvasJS](https://canvasjs.com/download-html5-charting-graphing-library/) and copy canvasjs.min.js, canvasjs.react.js to src folder.

### Determine Chart Types to Use
CanvasJS supports [30+ chart types](https://canvasjs.com/docs/charts/chart-types/) including line, area, column, bar, pie, funnel, etc. You need to determine which chart type to use based on type of data / information you need to show - as not all chart type convey same kind of information effectively. There are a number of things to keep in mind while deciding what kind of chart you should be using. Below is a diagram which explains the same (by Dr. Andrew Abela).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gjgwu4mma586jr4fjdm1.jpg)
### Add CanvasJS Chart to your App
  - Create a react app. You can refer [React documentation](https://reactjs.org/docs/create-a-new-react-app.html) on Creating a New React App, if you get stuck.
```
npx create-react-app canvasjs-charts
cd canvasjs-charts
npm start
```
  - Import CanvasJS React component to your app (app.js).
```
//Use the below lines if you installed CanvasJS React Charts from NPM
import CanvasJSReact from '@canvasjs/react-charts';
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
```

```
//Use the below lines if you downloaded CanvasJS React Charts from the official website & not from NPM
import CanvasJSReact from './canvasjs.react';
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
```
  - Add CanvasJS react component to your app.
```
const options = {
    theme: "light2", // "light1", "dark1", "dark2"
    animationEnabled: true, //Change to false
    animatoinDuration: 1200, //Change it to 2000		
    title:{
      text: "Basic Column Chart in React"
    },
    data: [{
      //Change type to "line", "bar", "area", "pie", etc.
      type: "column",
      dataPoints: [
        { label: "apple",  y: 10  },
        { label: "orange", y: 15  },
        { label: "banana", y: 25  },
        { label: "mango",  y: 30  },
        { label: "grape",  y: 28  }
      ]
    }]
},
<CanvasJSChart options = {options} />
```
### Rounding Off
The entire code snippet of adding CanvasJS Chart component to your app (app.js) looks as below. Checkout live example @ [Stackblitz](https://stackblitz.com/edit/canvasjs-react-basic-column-chart)
```
import CanvasJSReact from '@canvasjs/react-charts';
//var CanvasJSReact = require('@canvasjs/react-charts');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class App extends Component {
    render() {
      const chart;
    
      const options = {
        theme: "light2", // "light1", "dark1", "dark2"
        animationEnabled: true, //Change to false
        animatoinDuration: 1200, //Change it to 2000		
        title:{
          text: "Basic Column Chart in React"
        },
        data: [
        {
          //Change type to "line", "bar", "area", "pie", etc.
          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}
          />
        </div>
      );
    }
}
```

Awesome! You have created a chart using CanvasJS React component. Now let's see how to update chart options and how to style the chart container to customize it's height, border, adding background-image, etc.

### Styling Chart Container
You can style the chart-container by passing styling-properties as containerProps. This props are generally used to set the height of the chart-container or to add the [background image to the chart-container](https://stackblitz.com/edit/canvasjs-react-chart-background-image).
```
containerProps = {
    width: "100%",
    height: "300px",
    border: "1px solid black"
};
<CanvasJSChart
    options={options}
    containerProps={containerProps}
/>
```

### Getting Reference to Chart Instance
You can get the reference to the chart instance by passing `onRef = {ref => this.chart = ref}` props to the component. Chart instance is helpful to get the current set of chart-options being set or to re-render chart (`chart.render();`). By updating chart-options and re-rendering you can update chart dynamically. This method can be used to create [dynamic / live charts](https://canvasjs.com/react-charts/dynamic-live-line-chart/).
```
<CanvasJSChart
    options={options}
    onRef={ref => (chart = ref)} //Reference to the chart-instance
    containerProps={containerProps}
/>
```

Checkout [CanvasJS React Charts Gallery](https://canvasjs.com/react-charts/) for more examples with downloadable samples.