Recharts - How to fix graph scaling issue? - reactjs

Question

In React application (using Next.js), I am trying to implement graph feature using recharts http://recharts.org/en-US/api/LineChart. My code is as below,
/index.js
const formatDate = (value) => {
return moment.unix(value).format('HH:MM A DD MM, YYYY')
}
const weeklyData = [
{ date: formatDate(1613619000), price: '1200.00' },
{ date: formatDate(1613617200), price: '1300.83' },
{ date: formatDate(1613615400), price: '1250.23' },
{ date: formatDate(1613611800), price: '500.55' },
{ date: formatDate(1613608200), price: '1600.23' },
{ date: formatDate(1613606400), price: '1850.93' },
{ date: formatDate(1613604600), price: '1750.23' },
{ date: formatDate(1613599200), price: '650.23' },
]
<LineChart
width={900}
height={250}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<Tooltip content={<CustomTooltip />} cursor={false} />
<Line type="monotone" dataKey="price" stroke="#4ec6f4" label="Shruthi" />
</LineChart>
/tooltip.js
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="tooltip">
<p className="tooltipLabel">{`$${payload[0].payload?.price}`}</p>
<p className="tooltipDesc">{`${payload[0]?.payload?.date}`}</p>
</div>
)
}
return null
}
CustomTooltip.propTypes = {
type: PropTypes.string,
payload: PropTypes.array,
label: PropTypes.string,
}
export default CustomTooltip
Right now YAxis is restricted to 1000 and graph(scaling) is displaying out of the box and its invisible.
Graph should be display within the container which I have set.
Here price is not fixed, it can be like 123456.88 or more than this.
In all scenario, how can I fix this issue?

Answer 1

try to convert price type to number or use values without single quotes.
Note: if possible, Post complete code for better response