React.Js-图表放大/缩小和画笔问题

Question

我正在使用Rechart库并使用AreaChartFillByValue。我面临以下问题

1）当我放大图表时，它超出了x轴，当我缩小图表时，只需将其重置为起点即可：例如，假设当前起点是1到15，但实际数据是30，当我放大时，它会显示在x轴上为5到10的值，当我缩放时，它将恢复为1到15的值。我希望它可以缩放直到整个数据显示从1到30。

2）当我放大画笔时，应缩小并显示过滤器的起点和终点，例如：假设当前起点是1到15，而当我放大时，它在x轴上显示5到10的值，但是画笔仍显示1到15的值。

3）放大时无法拖动图表。我可以拖动画笔并更新图表显示，但不能从图表中进行操作。

4）使用画笔时，分色不起作用。正值显示为绿色，负值显示为红色。但这并没有适当地体现中间价值。我遵循了官方教程link，使用的画笔也有同样的问题。

我尝试了互联网上所有可用的示例，但找不到用于放大和画笔的解决方案。如果任何人都可以解决此问题，那就太好了。由于GITHUB

中没有类似的未解决问题

为使内容更清楚，请参见以下两个预期图像。
我的输出 我的代码：stackblitz editor 预期产量

Example Link for the above image

Example Link for the above image