Example shows React Stacked Column 100% Chart with indexlabels for all the datapoints.
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 = { animationEnabled: true, theme: "light2", title: { text: "Number of Students in Each Room" }, axisX: { title: "Rooms" }, axisY: { title: "Percentage" }, toolTip: { shared: true }, legend: { horizontalAlign: "right", verticalAlign: "center", reversed: true }, data: [{ type: "stackedColumn100", name: "Boys", showInLegend: "true", indexLabel: "#percent %", indexLabelPlacement: "inside", indexLabelFontColor: "white", dataPoints: [ { y: 45, label: "Cafeteria" }, { y: 24, label: "Lounge" }, { y: 68, label: "Games Room" }, { y: 24, label: "Lecture Hall" }, { y: 15, label: "Library" } ] }, { type: "stackedColumn100", name: "Girls", showInLegend: "true", indexLabel: "#percent %", indexLabelPlacement: "inside", indexLabelFontColor: "white", dataPoints: [ { y: 22, label: "Cafeteria" }, { y: 17, label: "Lounge" }, { y: 32, label: "Games Room" }, { y: 48, label: "Lecture Hall" }, { y: 25, label: "Library" } ] }] }; 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;
indexLabelPlacement property lets you change the placement of the Index / Data Labels. You can also customize their font size and font color using indexLabelFontSize and indexLabelFontColor.
Note For step by step instructions, follow our React Integration Tutorial