React Stacked Bar 100% charts are similar to Stacked Bar Chart except that the height of individual bars are rendered as a percentage of the total sum. Below example shows a React Stacked Bar 100% 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 = { title: { text: "Popular Majors Opted by Women & Men" }, toolTip: { shared: true }, legend: { verticalAlign: "top" }, axisY: { suffix: "%" }, data: [{ type: "stackedBar100", color: "#9bbb59", name: "Women", showInLegend: true, indexLabel: "{y}", indexLabelFontColor: "white", yValueFormatString: "#,###'%'", dataPoints: [ { label: "Health & Clinical Science", y: 85 }, { label: "Education", y: 79 }, { label: "Psyhcology", y: 77 }, { label: "Language & Literature", y: 68 }, { label: "Communication Tech", y: 63 }, { label: "Art", y: 61 }, { label: "Biomedical Science", y: 59 }, { label: "Social Science & History", y: 49 }, { label: "Business", y: 49 }, { label: "Computer & Info Science", y: 18 } ] },{ type: "stackedBar100", color: "#7f7f7f", name: "Men", showInLegend: true, indexLabel: "{y}%", indexLabelFontColor: "white", yValueFormatString: "#,###'%'", dataPoints: [ { label: "Health & Clinical Science", y: 15 }, { label: "Education", y: 21 }, { label: "Psychology", y: 23 }, { label: "Language & Literature", y: 32 }, { label: "Communication Tech", y: 37 }, { label: "Art", y: 39 }, { label: "Biomedical Science", y: 41 }, { label: "Social Science & History", y: 51 }, { label: "Business", y: 51 }, { label: "Computer & Info Science", y: 82 } ] }] } 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 customize width of bar using dataPointWidth. You can also toggle data series by clicking on legends using visible property of data series.
Note For step by step instructions, follow our React Integration Tutorial