title: Creating a Rechart barchart with rounded edges
body: <p><a href="https://i.stack.imgur.com/7GUCs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7GUCs.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to create a barchart like this, where the bar is X length, and each segment of the bar is proportional in length to the % of the data it contains. I've gotten pretty close by creating a vertical layout stacked barchart, but can't figure out how to get rounded edges. I've tried <code>border={x}</code> on the <code>Bar</code> components, but that rounds both sides of the bar, and I just want the left side of the first, and right side of the second bar rounded. Any advice? Or am I possibly going about this using the wrong components to begin with?</p>
  
  <p>Here's what I have so far, and a screenshot of the result.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
  const data = [
        {name: '1', a: 50, b: 20, c: 10},
  ];
  const StackedBarChart = React.createClass({
    render () {
     return (
       &lt;BarChart layout="vertical" width={600} height={50} data={data}
              margin={{top: 20, right: 30, left: 20, bottom: 5}}&gt;
         &lt;XAxis hide  type="number"/&gt;
         &lt;YAxis hide dataKey="name" type="category"/&gt;
         &lt;Tooltip /&gt;
         &lt;Bar dataKey="a" stackId="a" fill="#8884d8" radius={20} /&gt;
         &lt;Bar dataKey="b" stackId="a" fill="#8884d8" /&gt;
         &lt;Bar dataKey="c" stackId="a" fill="black" radius={20}/&gt;
        &lt;/BarChart&gt;
      );
    }
  })
  
  ReactDOM.render(
    &lt;StackedBarChart /&gt;,
    document.getElementById('container')
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/recharts/umd/Recharts.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
    &lt;!-- This element's contents will be replaced with your component. --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Not sure why that snippet isn't working, so here's the JSFiddle <a href="https://jsfiddle.net/nur2t39y/" rel="noreferrer">https://jsfiddle.net/nur2t39y/</a></p>
  
  <p><a href="https://i.stack.imgur.com/nLlYw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nLlYw.png" alt="enter image description here"></a></p>