React Pie charts are Circular Charts that shows the relative contribution of different categories to an overall total. Below example shows a React Pie Chart along with source code that you can try running 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 = { exportEnabled: true, animationEnabled: true, title: { text: "Website Traffic Sources" }, data: [{ type: "pie", startAngle: 75, toolTipContent: "<b>{label}</b>: {y}%", showInLegend: "true", legendText: "{label}", indexLabelFontSize: 16, indexLabel: "{label} - {y}%", dataPoints: [ { y: 18, label: "Direct" }, { y: 49, label: "Organic Search" }, { y: 9, label: "Paid Search" }, { y: 5, label: "Referral" }, { y: 19, label: "Social" } ] }] } 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;
The starting angle of pie can be changed using startAngle. Other frequently used customization options are radius, indexLabelPlacement, etc.
Note For step by step instructions, follow our React Integration Tutorial