React Stacked Bar Charts are formed by stacking one data-series on top of the other. Below example shows a React Stacked Bar 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 { constructor() { super(); this.toggleDataSeries = this.toggleDataSeries.bind(this); } toggleDataSeries(e) { if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } this.chart.render(); } render() { const options = { animationEnabled: true, theme: "light2", title:{ text: "Evening Sales in a Restaurant" }, axisX: { valueFormatString: "DDD" }, axisY: { prefix: "$" }, toolTip: { shared: true }, legend:{ cursor: "pointer", itemclick: this.toggleDataSeries }, data: [{ type: "stackedBar", name: "Meals", showInLegend: "true", xValueFormatString: "DD, MMM", yValueFormatString: "$#,##0", dataPoints: [ { x: new Date(2018, 5, 25), y: 56 }, { x: new Date(2018, 5, 26), y: 45 }, { x: new Date(2018, 5, 27), y: 71 }, { x: new Date(2018, 5, 28), y: 41 }, { x: new Date(2018, 5, 29), y: 60 }, { x: new Date(2018, 5, 30), y: 75 }, { x: new Date(2018, 6, 1), y: 98 } ] }, { type: "stackedBar", name: "Snacks", showInLegend: "true", xValueFormatString: "DD, MMM", yValueFormatString: "$#,##0", dataPoints: [ { x: new Date(2018, 5, 25), y: 86 }, { x: new Date(2018, 5, 26), y: 95 }, { x: new Date(2018, 5, 27), y: 71 }, { x: new Date(2018, 5, 28), y: 58 }, { x: new Date(2018, 5, 29), y: 60 }, { x: new Date(2018, 5, 30), y: 65 }, { x: new Date(2018, 6, 1), y: 89 } ] }, { type: "stackedBar", name: "Drinks", showInLegend: "true", xValueFormatString: "DD, MMM", yValueFormatString: "$#,##0", dataPoints: [ { x: new Date(2018, 5, 25), y: 48 }, { x: new Date(2018, 5, 26), y: 45 }, { x: new Date(2018, 5, 27), y: 41 }, { x: new Date(2018, 5, 28), y: 55 }, { x: new Date(2018, 5, 29), y: 80 }, { x: new Date(2018, 5, 30), y: 85 }, { x: new Date(2018, 6, 1), y: 83 } ] }, { type: "stackedBar", name: "Dessert", showInLegend: "true", xValueFormatString: "DD, MMM", yValueFormatString: "$#,##0", dataPoints: [ { x: new Date(2018, 5, 25), y: 61 }, { x: new Date(2018, 5, 26), y: 55 }, { x: new Date(2018, 5, 27), y: 61 }, { x: new Date(2018, 5, 28), y: 75 }, { x: new Date(2018, 5, 29), y: 80 }, { x: new Date(2018, 5, 30), y: 85 }, { x: new Date(2018, 6, 1), y: 105 } ] }, { type: "stackedBar", name: "Takeaway", showInLegend: "true", xValueFormatString: "DD, MMM", yValueFormatString: "$#,##0", dataPoints: [ { x: new Date(2018, 5, 25), y: 52 }, { x: new Date(2018, 5, 26), y: 55 }, { x: new Date(2018, 5, 27), y: 20 }, { x: new Date(2018, 5, 28), y: 35 }, { x: new Date(2018, 5, 29), y: 30 }, { x: new Date(2018, 5, 30), y: 45 }, { x: new Date(2018, 6, 1), y: 25 } ] }] } 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 set reversed property of Axis X to true to reverse the Axis X. Customizing the tooltip by using it's shared property at dataSeries level, enhances the readability of chart.