Data Visualization using CanvasJS React Charts

React 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
• CanvasJS

Installation

Updated to work with official CanvasJS React Charts NPM Package

Old approach (Follow this if you are not installing package from NPM): Download CanvasJS and copy canvasjs.min.js, canvasjs.react.js to src folder.

Determine Chart Types to Use

CanvasJS supports 30+ 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).

Add CanvasJS Chart to your App

• Create a react app. You can refer React documentation 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

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.

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.

<CanvasJSChart
    options={options}
    onRef={ref => (chart = ref)} //Reference to the chart-instance
    containerProps={containerProps}
/>

Checkout CanvasJS React Charts Gallery for more examples with downloadable samples.