title: How to show value of each bar in react-chartjs-2
body: <p>I have a question about bar chart in react-chartjs-2. I made a bar chart and pie chart using react-chartjs-2 in my application. </p>
  
  <p>I could show the value of pie chart using a <a href="https://github.com/emn178/Chart.PieceLabel.js" rel="noreferrer">plugin</a> calls Chart.PieceLabel.js. But I couldn't find a plugin for a bar chart. <strong>I want to show the value of each bar as same as pie chart.</strong></p>
  
  <p>Is it possible to value of each bar in a bar chart?</p>
  
  <p>Current view is like this. In pie chart, the value of each slice appears.</p>
  
  <p><a href="https://i.stack.imgur.com/Lo62k.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Lo62k.png" alt="enter image description here"></a></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
    })
  }    
  
    componentDidMount() {
      let ctx = this.refs.chart.chart_instance.chart.ctx;
      console.log(this.refs.chart.chart_instance.chart.ctx); // returns a Chart.js instance reference
      this.refs.chart.chart_instance.chart.config.data.datasets.forEach(function (dataset) {
                  if(dataset.type === 'bar'){
                      const dataArray = dataset.data;
                      dataset._meta[0].data.forEach(function (bar, index) {
                          ctx.fillText(dataArray[index], bar._view.x, bar._view.y);
                      });
                  };
              })
    }
  
  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: function (args) {
                return args.value + '%';
              },
       fontSize: 40,
       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: [ piData , piData, piData , piData , piData ]
    }
    ]
    };
  
    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;HorizontalBar
        ref='chart'
        data={bardata}
        width={100}
        height={50}
        options={{
          maintainAspectRatio: false
        }}
      /&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>
  
  <p>I appreciate your kind help, thank you for taking time to read my question.</p>