图表-具有圆角的反向垂直条形图具有倒转的末端

Question

I want to create a bar chart with rounded bars that looks like this, but have the bars in reverse

But after adding the reversed prop to the XAxis component, it becomes like this

Here is my code i did from one of the examples in Recharts

 const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts; const data = [ {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, ]; const SimpleBarChart = React.createClass({ render () { return ( <BarChart width={ 600 } height={ 400 } data={ data } maxBarSize={ 20 } layout={ 'vertical' }> <CartesianGrid strokeDasharray="3 3" /> <XAxis type={ 'number' } orientation={ 'top' } reversed /> <YAxis type={ 'category' } orientation={ 'right' } dataKey={ 'name' } /> <Bar dataKey={ 'pv' } fill={ '#8884d8' } radius={ 20 }/> </BarChart> ); } }) ReactDOM.render( <SimpleBarChart />, document.getElementById('container') ); 

 body { margin: 0; } #container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; width: 800px; height: 800px; background-color: #fff; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> <script src="https://npmcdn.com/react@15.6.2/dist/react-with-addons.min.js"></script> <script src="https://npmcdn.com/react-dom@15.6.2/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/prop-types@15.6.2/prop-types.min.js"></script> <script src="https://npmcdn.com/recharts@1.4.2/umd/Recharts.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div> 

Update - I tried removing the reversed prop and just added data with negative values to see if the same inverted bars would happen and the results were the same. So it would seem that when the values are negative and the bars are in the vertical layout, rounded corners will just happen to act this way. Does anyone have any idea what is going on.

Update - seems like this was a bug on Recharts side and was fixed in a newer version

Answer 1

You should specify type in XAxis to be number

<BarChart 
  width={600} 
  height={300} 
  data={data} 
  layout="vertical"
  margin={{top: 5, right: 30, left: 20, bottom: 5}}
>
  <XAxis type="number"/>
  <YAxis type="category" dataKey="name" />
  <CartesianGrid strokeDasharray="3 3"/>
  <Tooltip/>
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
  <Bar dataKey="uv" fill="#82ca9d" />
</BarChart>

Because the default value of type in XAxis is 'category'.

Answer 2

The latest version of Recharts addresses this issue. Once updated, it works fine now