Как установить градиент к фону реагировать на xyplot?

Question

Попытка стилизовать фон XYPlot и левой оси выше 0, чтобы иметь красные и зеленые зоны. Я приближаюсь к левой секции осей, в настоящее время она идет ниже осей. Я все еще не уверен, какую часть откорректировать для фактического тела диаграммы.

И я признаю, что мои навыки CSS довольно слабые. Но любая помощь будет принята с благодарностью.

Вот кодовая ручка с тем, где я сейчас нахожусь: 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>;