Make a horizontal bar using react-chartjs-2

Question

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>
    )
}
}

Answer 1

我刚刚发现有一个单杠的例子。

Answer 2

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>
        );
    }
}

Answer 3

You can also pass additional props besides data to the HorizontalBar component to control layout of the chart.

For example:

return (
      <div>
        <HorizontalBar
          data={data}
          width={80}
          height={100}
          options={{
            maintainAspectRatio: true
          }}
        />
      </div>
    );

Answer 4

Recently I was searching for the same solution and came across this link -> Chart.js - Horizontal Bar

In the Bar component definition, add indexAxis: 'y' within the options section.

 <Bar
     data={data}
     options={{
     indexAxis: 'y',
     plugins:{
          title:{display:false, text:currText, font:{size: 12, family: 'rubik'}},
          legend: {display: false, position: 'right'}},
     maintainAspectRatio: false
     }}
 />

Also add axis: 'y' in the dataset part of the data object.

const data = {
    labels: currLabel,
    datasets: [
      {
        axis: 'y',
        backgroundColor: '#3490dc',
        hoverBackgroundColor: '#1d4f79',
        data: currData
      }
    ]
}

This aligns the bar graph horizontally. Check the output here.

Answer 5

我认为您可以使用 d3plus-react 中的BarChart