I'm struggling to find information to make chart with react-chartjs-2.
I made a bar chart using react-chartjs-2. I couldn't find related information about making it horizontal bar. Is it possible to make a horizontal bar with react-chartjs-2?
I also have a pie chart next to a bar chart. I use same data from a pie chart to make a bar chart.
Any help is appreciated.
Here is my code.
export default class Categories extends React.Component{ constructor(props){ super(props); this.state = { slideOpen : false, piData : piData } this.handleClick = this.handleClick.bind(this); this.update = this.update.bind(this); this.doParentToggle = this.doParentToggle.bind(this); } doParentToggle(){ this.setState({ piData : piData }) this.update(); } handleClick(){ this.setState({ slideOpen : !this.state.slideOpen }) } update() { var piData; this.setState({ piData : piData }) } render(){ const CategoriesPanel = this.state.slideOpen? "slideOpen" : ""; const { length } = this.props var totalData = piData + piData2 + piData3 + piData4 + piData5; let newpiData = function() { return parseFloat((piData / totalData ) * 100 ).toFixed(2) }; let newpiData2 = function() { return parseFloat((piData2 / totalData ) * 100).toFixed(2) }; let newpiData3 = function() { return parseFloat((piData3 / totalData ) * 100).toFixed(2) }; let newpiData4 = function() { return parseFloat((piData4 / totalData ) * 100).toFixed(2) }; let newpiData5 = function() { return parseFloat((piData5 / totalData ) * 100).toFixed(2) }; const data = { datasets: [{ data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()], backgroundColor: [ 'orange', 'blue', 'red', 'purple', 'green' ], borderColor: [ 'orange', 'blue', 'red', 'purple', 'green' ] }]}; var pieOptions = { pieceLabel: { render: 'value', fontSize: 30, fontColor: '#fff' } }; const bardata = { labels: ['1', '2', '3', '4', '5'], datasets: [ { backgroundColor: [ 'orange', 'blue', 'red', 'purple', 'green' ], borderColor: 'black', borderWidth: 3, hoverBackgroundColor: 'rgba(255,99,132,0.4)', hoverBorderColor: 'rgba(255,99,132,1)', data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()] } ] }; return( <div> <div id="chart" className={CategoriesPanel}> <div style={{"display" : "flex"}}> <Pie style={{"fontSize" : "20px" }} data={data} options={pieOptions}/> <Bar data={bardata} width={100} height={50} options={{ maintainAspectRatio: false }} options={pieOptions} /> </div> </div> <div className="categoriesSlide" onClick={this.handleClick}>{this.state.slideOpen? <img src={Arrowup} alt="arrowup" className="arrowup" /> : <img src={Arrowdown} alt="arrowdown" className="arrowdown"/>}</div> <div className="clear"> <List parentToggle={this.doParentToggle} /> <ListSecond parentToggle={this.doParentToggle} /> <ListThird parentToggle={this.doParentToggle} /> <ListFourth parentToggle={this.doParentToggle} /> <ListFifth parentToggle={this.doParentToggle} /> </div> </div> ) } }