Recharts: XAxis number cutoff on vertical bar chart

[patrick-lewandowski]

The following chart:

<ResponsiveContainer width="100%" height="100%">
  <ComposedChart layout="vertical" data={data} >
    <XAxis type="number"/>
    <YAxis dataKey="name" type="category" width={200}/>
    <CartesianGrid stroke="#f5f5f5"/>
    <Tooltip/>
    <Legend />
    <Bar dataKey="OS" barSize={20} fill="#8884d8" />
  </ComposedChart>
</ResponsiveContainer>

is cutting off the number on the Xaxis like so:

The standard barchart with same dataset was not cutting off the labels on XAxis.

[hi-bazinga]

You can set the margin property of the ComposedChart like this: margin={{right: 10}}

[patrick-lewandowski]

@hi-bazinga The margin does the trick, however it would be preferable if something more dynamic could be added to handle this scenario.

[RoarkeRandall]

Yeah this has been a pain point for me. When charting a customers spend, some will be spending $10 while others could be in the $100,000 range. This means i have a fairly large amount of wasted space on many charts to account for the larger spend customers.