react-vis: dynamic height for charts, when the numbers are increased - reactjs

Question

I have a project, and this project contains several interfaces, and among these interfaces there is an interface to display a set of statistics, meaning that the interface displays a set of charts,
And I use a library called:
react-vis
But the problem is shown in this picture:
When the numbers increase, the numbers are displayed on top of each other:
How can height be dynamic?
import ReactChart from '../../common/chart';
<Row className='mt-8'>
<Col lg={24}>
<ReactChart
type={typeChart.Bar}
data={xtopography}
height={240}
width={1000}
fill={'#1E8D77'}
/>
</Col>
</Row>
BarChart.tsx:
import { CSSProperties, FunctionComponent, useEffect, useState } from 'react';
import {
XYPlot,
XAxis,
YAxis,
VerticalGridLines,
HorizontalGridLines,
VerticalBarSeries,
makeHeightFlexible
} from 'react-vis';
import { BaseChart } from './data/interfaces';
interface BarChartProps extends BaseChart {
colorValue?: string;
color?: string;
style?: CSSProperties;
barWidth?: number;
stroke?: string;
fill?: string;
}
const BarChart: FunctionComponent<BarChartProps> = ({
colorRange,
colorValue,
color,
data,
style,
barWidth,
width,
height,
stroke,
fill,
}) => {
var yValues: any = data?.map((y, index) => {
return y?.y;
})
const FlexibleXYPlot = makeHeightFlexible(yValues);
return (
<>
<XYPlot
margin={{ bottom: 30, left: 20, top: 20 }}
xType='ordinal'
width={width ? width : 450}
height={height}
>
<VerticalGridLines marginLeft={2} width={5} />
<HorizontalGridLines tickValues={yValues} />
<XAxis />
<YAxis tickValues={yValues}
tickSize={12} />
<VerticalBarSeries
_colorValue={colorValue ? colorValue : 'red'}
colorRange={
colorRange
? colorRange
: ['#005fff36', '#00800045', '#fafafa']
}
barWidth={barWidth ? barWidth : 0.3}
color={color ? color : 'yellow'}
fill={fill ? fill : '#C6E2DD'}
stroke={stroke ? stroke : '#55805045'}
width={6}
style={style}
data={data}
/>
</XYPlot>
</>
);
};
export default BarChart;