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>
)
}
}
Bar charts are created by setting type to bar (to flip the direction of the bars, set type to horizontalBar ). The colors of the bars are set by passing one color to backgroundColor (all bars will have the same color), or an array of colors.
The React wrapper for chart. js is react-chartjs-2 ; it makes things simpler in React, however, it doesn't support all the customization features that come with Chart. js. Both these packages need to be installed using npm before they can be used.
react-chartjs-2 - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers.
Following are some simple steps to do so: Step 1: Create a React application using the following command. Step 2: After creating your project folder i.e. BARCHART_REACT, move to it using the following command. Step 3: After creating the ReactJS application, Install react-chartjs-2 and chart.
I just found that there is an example of horizontal bar.
Import HorizontalBar from the react-chartjs-2 library
I found an example on github called HorizontalBar.js
Here's an demo of it being implemented.
I was looking everywhere for this solution, so I hope this template can be of use for anyone else using react-chartjs-2.
//barchart.js
import React from 'react';
import {HorizontalBar} from 'react-chartjs-2';
const state = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
}
export default class barchart extends React.Component {
render() {
return (
<div>
<h2>Horizontal Bar Example</h2>
<HorizontalBar data={state} />
</div>
);
}
}
Then you can import it just like any other component
//app.js
import Barchart from './barchart';
export default class App extends React.Component {
render() {
return (
<div>
<Barchart/>
</div>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With