title: React.Js - rechart zoom IN/OUT and Brush issue
body: <p>I am using <a href="http://recharts.org/en-US/examples/AreaChartFillByValue" rel="noreferrer">Rechart</a> library and using AreaChartFillByValue. I am facing following issues <br/><br/>
  1) When I zoom in the chart goes outside the x-axis and when I zoom out it just reset to where it started for example: suppose the current starting point is 1 to 15 but actual data is 30 and when I zoom in it shows 5 to 10 value in x-axis and when I zoom it takes back to 1 to 15 value. I want it should zoom till the entire data display from 1 to 30.<br/><br/> 
  2) When I zoom in brush should zoom out and show the filter starting and ending point for example: suppose the current starting point is 1 to 15 and when I zoom in it shows 5 to 10 value in x-axis but the brush still shows 1 to 15 value.<br/><br/></p>
  
  <p>3) I am not able to drag the chart when it is zoom in. I am able to drag the brush and update the chart display but not able to do it from the chart.</p>
  
  <p>4) The color split is not working when I use a brush. The positive value display in green and negative value display in red. But it is not taking middle value properly. I followed the official tutorial <a href="http://recharts.org/en-US/examples/AreaChartFillByValue" rel="noreferrer">link</a> using the brush it is giving the same issue. </p>
  
  <p>I tried all the examples which are available on the internet but not able to find a solution for zoom in and brush. It would great if anyone can resolve this issue. As there no similar open issues in <a href="https://github.com/recharts/recharts/issues" rel="noreferrer">GITHUB</a></p>
  
  <p>To make it more clear please see the below two expected image. <br/>
  <strong>My output</strong> 
  <a href="https://i.stack.imgur.com/ISrtF.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/ISrtF.gif" alt="Myoutput"></a>
  <strong>My Code: <a href="https://stackblitz.com/edit/react-recharts-2kemus" rel="noreferrer">stackblitz editor</a></strong>
  <strong>Expected output</strong>
  <a href="https://i.stack.imgur.com/HUwkH.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/HUwkH.gif" alt="one"></a></p>
  
  <p><a href="https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172" rel="noreferrer">Example Link for the above image</a></p>
  
  <p><a href="https://i.stack.imgur.com/mT7JD.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/mT7JD.gif" alt="two"></a></p>
  
  <p><a href="https://formidable.com/open-source/victory/gallery/brush-zoom/" rel="noreferrer">Example Link for the above image</a></p>