CODEWITHSUNDEEP
reactjsbar-chartresponsiveweb-frontendrecharts
Ping Zhao
Ping Zhao

Reputation: 276

Recharts - change height based on chart data in vertical bar chart

I am using dynamic data as the data props for recharts bar chart. I set the min height of wrapper component of chart component, but the chart height is just like the min height that I set. So when the length of props data is long, then chart looks ugly though I set the barSize, barGap, and etc.

enter image description here

Upvotes: 0

Views: 2065

Answers (1)

Ping Zhao
Ping Zhao

Reputation: 276

I have resolved this issue by wrapping ResponsiveContainer and set the height of the container as variable according to the length of data props.

<ResponsiveContainer height={props.data.length * (props.barSize + props.barGap)}>
   {chart component}
</ResponsiveContainer>

Upvotes: 1

Related Questions