Doughnut Chart, also referred as Donut Charts, is same as Pie Chart except it has an area of the center cut out. Given example shows React Doughnut Chart along with source code that you can try running locally.
Read More >>
/* App.js */ var React = require('react'); var Component = React.Component; var CanvasJSReact = require('./canvasjs.react'); var CanvasJS = CanvasJSReact.CanvasJS; var CanvasJSChart = CanvasJSReact.CanvasJSChart; class App extends Component { render() { const options = { animationEnabled: true, title: { text: "Customer Satisfaction" }, subtitles: [{ text: "71% Positive", verticalAlign: "center", fontSize: 24, dockInsidePlotArea: true }], data: [{ type: "doughnut", showInLegend: true, indexLabel: "{name}: {y}", yValueFormatString: "#,###'%'", dataPoints: [ { name: "Unsatisfied", y: 5 }, { name: "Very Unsatisfied", y: 31 }, { name: "Very Satisfied", y: 40 }, { name: "Satisfied", y: 17 }, { name: "Neutral", y: 7 } ] }] } 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> ); } } module.exports = App;
radius & innerRadius properties can be used to customize the size of doughnut charts. Some other frequently used customizations options are startAngle, indexLabelPlacement, exploded, etc.