title: Recharts - Normalised Stacked Bar Charts
body: <p>I'm pretty new to both React and Recharts and I'm sitting with a bit of a predicament. I did quite a bit of reading up but I can't seem to find what I'm looking for, so I am hoping I can get some help here.</p>
  <p>I have a dataset that includes a list of processes with completed, failed and in progress statuses and I would like to show a stacked Bar Chart but normalise them - i.e. they all need to be the same width. I managed to get most of it working but displaying the value on the bars is proving to be a pain.</p>
  <p>Below is my code:</p>
  <pre><code>export default class DashboardView extends React.Component&lt;IDashboardView, {}&gt;{
  render() {
      const { dashboard, onDashboardItemClick } = this.props;
  
      const data = [
          {name: 'NE Send', completed: 230, failed: 335, inprogress: 453},
          {name: 'NE Resend', completed: 335, failed: 330, inprogress: 345},
          {name: 'Miles Orchestrator', completed: 537, failed: 243, inprogress: 2110},
          {name: 'Commissions Payment Orch', completed: 132, failed: 328, inprogress: 540},
          {name: 'Business Integrators', completed: 530, failed: 145, inprogress: 335},
          {name: 'SmartTrack', completed: 538, failed: 312, inprogress: 110}
      ];
  
      const CustomizedLabel = React.createClass({
          render () {
              const {x, y, value, dataKey} = this.props;                
              const fullValue =  value; //(value[1] - value[0]);
              return &lt;text x={x-20}  y={y+5}  dy={0} fontSize='12' fill=&quot;#FFFFFF&quot; fontWeight=&quot;Bold&quot; textAnchor=&quot;start&quot;&gt;{fullValue}&lt;/text&gt;
          }
      });
      
      return (
          &lt;div className=&quot;content c-white&quot;&gt;
              &lt;h1&gt;Dashboard&lt;/h1&gt;
              &lt;ResponsiveContainer height={250} width={'100%'}&gt;
                  &lt;BarChart layout=&quot;vertical&quot; data={data} margin={{left: 50, right: 50}} stackOffset=&quot;expand&quot;&gt;
                      &lt;XAxis hide type=&quot;number&quot;/&gt;
                      &lt;YAxis type=&quot;category&quot; dataKey=&quot;name&quot; stroke=&quot;#FFFFFF&quot; fontSize=&quot;12&quot; /&gt;
                      &lt;Tooltip/&gt;
                      &lt;Bar dataKey=&quot;failed&quot; fill=&quot;#dd7876&quot; stackId=&quot;a&quot; label={&lt;CustomizedLabel /&gt;} /&gt;
                      &lt;Bar dataKey=&quot;completed&quot; fill=&quot;#82ba7f&quot; stackId=&quot;a&quot; label={&lt;CustomizedLabel/&gt;} /&gt;
                      &lt;Bar dataKey=&quot;inprogress&quot; fill=&quot;#76a8dd&quot; stackId=&quot;a&quot; label={&lt;CustomizedLabel/&gt;} /&gt;
                  &lt;/BarChart&gt;
              &lt;/ResponsiveContainer&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  <p>Which results in this:
  <a href="https://i.stack.imgur.com/6G5HP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6G5HP.png" alt="Screenshot of Dashboard with a stacked bar chart" /></a>
  As you can see, the numbers are... well... odd and this only happens when I add the stackOffset=&quot;expand&quot; attribute.</p>
  <p>How can I get the actual value of the section to my label instead of the calculated value based on the stackOffset? The value that I am displaying is an array of two values and I tried some manipulation of those values without success.</p>
  <p>Any help will be much appreciated.</p>