React recharts chart is not zooming to show small value difference

Question

So i have a chart with big values that are almost all different. For example (1024.3, 1024.1, ...). But the problem is that chart is not zooming those values to show the difference and also ticks on Y-axis are overlapping.

Chart code is:

<div className="chart">
            <ResponsiveContainer width="100%" height="100%">
                <LineChart
                    width={1000}
                    height={300}
                    data={props.chartData.data}
                    margin={{
                        top: 5,
                        right: 30,
                        left: 20,
                        bottom: 0,
                    }}
                >
                    <XAxis dataKey={props.chartData.xAxis} stroke="#000000" />
                    <YAxis type="number" padding={{ top: 50, bottom: 30 }} ticks={props.chartData.minmaxavg.arrayMinMax} stroke="#000000" interval={0} />
                    <Tooltip cursor={false} />
                    <Legend />
                    <Line type="monotone" dataKey={props.chartData.value1} stroke="#000000" dot={false} />
                    <ReferenceLine y={props.chartData.minmaxavg.avg} stroke="white" strokeDasharray="4 4" />
                    <Line type="monotone" dataKey={props.chartData.value2} stroke="#6EDEFF" dot={false} />
                </LineChart>
            </ResponsiveContainer>
        </div>

And the chart is looking like this: chart image

I would love to zoom in those values to show curves and also to show all ticks but not overlap them.

Answer 1

So I managed to make it work by adding domain on Y-axis. Domain has interval from minimum value that I am passing and maximum value. Still there is a problem if u want to show all ticks because they overlap but in my case I am happy to show only maximum, minimum and average tick.

Working code:

<div className="chart">
            <ResponsiveContainer width="100%" height="100%">
                <LineChart
                    data={props.chartData.data}
                    margin={{
                        top: 5,
                        right: 30,
                        left: 20,
                        bottom: 0,
                    }}
                >
                    <XAxis dataKey={props.chartData.xAxis} stroke="#000000" />
                    <YAxis type="number" padding={{ top: 50, bottom: 30 }} ticks={props.chartData.minmaxavg.arrayMinMax} stroke="#000000" interval={0} domain={[props.chartData.minmaxavg.min, props.chartData.minmaxavg.max]} />
                    <Tooltip cursor={false} />
                    <Legend />
                    <Line type="monotone" dataKey={props.chartData.value1} stroke="#000000" dot={false} />
                    <ReferenceLine y={props.chartData.minmaxavg.avg} stroke="white" strokeDasharray="4 4" />
                    <Line type="monotone" dataKey={props.chartData.value2} stroke="#6EDEFF" dot={false} />
                </LineChart>
            </ResponsiveContainer>
        </div>

Final chart image: