DEV Community

loading...
Cover image for Data Visualization using CanvasJS React Charts

Data Visualization using CanvasJS React Charts

Vishwas R
#Engineer || #SoftwareDeveloper || #Techie || #Cricketer || #Traveler || #Blogger
・3 min read

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
  • Import CanvasJS React component to your app (app.js).
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';
//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>
      );
    }
}

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.

Discussion (0)

Forem Open with the Forem app