title: Make a horizontal bar using react-chartjs-2
body: <p>I'm struggling to find information to make chart with react-chartjs-2. </p>
  
  <p>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? </p>
  
  <p>I also have a pie chart next to a bar chart. I use same data from a pie chart  to make a bar chart.</p>
  
  <p>Any help is appreciated. </p>
  
  <p>Here is my code.</p>
  
  <pre><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(
  &lt;div&gt;
  &lt;div id="chart" className={CategoriesPanel}&gt;
  &lt;div style={{"display" : "flex"}}&gt;
  &lt;Pie style={{"fontSize" : "20px" }} data={data} options={pieOptions}/&gt;
  &lt;Bar
        data={bardata}
        width={100}
        height={50}
        options={{
          maintainAspectRatio: false
        }}
        options={pieOptions}
      /&gt;
  &lt;/div&gt;
   &lt;/div&gt;
  &lt;div className="categoriesSlide" onClick={this.handleClick}&gt;{this.state.slideOpen? &lt;img src={Arrowup} alt="arrowup" className="arrowup" /&gt; : &lt;img src={Arrowdown} alt="arrowdown" className="arrowdown"/&gt;}&lt;/div&gt;
   &lt;div className="clear"&gt;
   &lt;List parentToggle={this.doParentToggle} /&gt;
   &lt;ListSecond parentToggle={this.doParentToggle} /&gt;
   &lt;ListThird parentToggle={this.doParentToggle} /&gt;
   &lt;ListFourth parentToggle={this.doParentToggle} /&gt;
   &lt;ListFifth parentToggle={this.doParentToggle} /&gt;
   &lt;/div&gt;
   &lt;/div&gt;
      )
  }
  }
  </code></pre>