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
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.
Top comments (0)