DEV Community 👩‍💻👨‍💻

Cover image for Data Visualization using CanvasJS React Charts
Vishwas R
Vishwas R

Posted on

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

Installation

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).
Alt Text

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
Enter fullscreen mode Exit fullscreen mode
  • Import CanvasJS React component to your app (app.js).
import CanvasJSReact from './canvasjs.react';
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
Enter fullscreen mode Exit fullscreen mode
  • 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} />
Enter fullscreen mode Exit fullscreen mode

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';
//var CanvasJSReact = require('./canvasjs.react');
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>
      );
    }
}
Enter fullscreen mode Exit fullscreen mode

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}
/>
Enter fullscreen mode Exit fullscreen mode

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}
/>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Top Heroku Alternatives (For Free)

>> Check out this classic DEV post <<