React Column Charts, also referred as Vertical Bar Charts, are rectangular bars with lengths proportional to the values that they represent. The given example shows a react column chart along with code that you can run locally
/* App.js */ import React, { Component } from 'react'; 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 options = { title: { text: "Basic Column Chart" }, data: [ { // Change type to "doughnut", "line", "splineArea", 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} /* onRef={ref => this.chart = ref} */ /> {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/} </div> ); } } export default App;
You can change the color of individual dataPoints using color property or change its width using dataPointWidth.
Note For step by step instructions, follow our React Integration Tutorial