How to set gradient to background of react-vis xyplot?

Question

Trying to style the background of the XYPlot and the left axes above 0 to have red and green zones. I'm getting close for the left axes section, it currently goes below the axes. I am still not sure what portion to adjust for the actual body of the chart.

And I'll admit my CSS skills are pretty weak. But any help would be greatly appreciated.

Here's a codepen with where I am now: https://codepen.io/onusigep/pen/eyZyar

return <div> 
    <XYPlot height={300} width={800} yDomain={[0, 200]} >
          <GradientDefs>
            <linearGradient id='CoolGradient' x1='0' x2='0' y1='0' y2='1'>
              <stop offset='0%' stopColor='green' stopOpacity={1.0} />
              <stop offset='25%' stopColor='white' stopOpacity={1.0} />
              <stop offset='75%' stopColor='white' stopOpacity={1.0} />
              <stop offset='75%' stopColor='red' stopOpacity={1.0} />
              <stop offset='100%' stopColor='white' stopOpacity={1.0} />
            </linearGradient>
          </GradientDefs>
          <VerticalGridLines />
          <HorizontalGridLines style={{ fill: '#000' }} />
          <XAxis tickValues={ticks} tickFormat={v => this.getTickValue(v)} tickLabelAngle={-45} />
          <YAxis />
          <LineMarkSeries data={data} color={'red'} />
          <Borders style={{
            bottom: {fill: '#fff', opacity: 0.3},
            left: {fill: 'url(#CoolGradient)', opacity: 0.3},
            right: {fill: '#fff'},
            top: {fill: '#fff'}
           }}/>
        </XYPlot>
    </div>;