how to use line gradient colors

[batuhansahan]

I read the docs but renderHorizontalLineGradient renderVerticalLineGradient cannot figure out how to use its not working.

  verticalLineGradient = (props) => {
    return (<Defs key={'verticalLineGradient'}>
        <LinearGradient x1='50%' y1='0%' x2='50%' y2='100%' {...props}>
        <Stop stopColor="#58508d" offset="20%" stopOpacity="0.2" />
        <Stop stopColor="#bc5090" offset="40%" stopOpacity="0.2" />
        <Stop stopColor="#ff6361" offset="60%" stopOpacity="0.2" />
        <Stop stopColor="#ffa600" offset="100%" stopOpacity="0.2" />
        </LinearGradient>
      </Defs>
    );
  }


          <SlideAreaChart
            scrollable
            style={{ marginTop: 32 }}
            shouldCancelWhenOutside={false}
            data={data}

            renderFillGradient={this.fillGradient}
            renderVerticalLineGradient={this.verticalLineGradient}
            // renderFillGradient={defaultAreaChartFillGradient}
            axisWidth={this.state.axisWidth}
            axisHeight={this.state.axisHeight}
            paddingBottom={8}
            yAxisProps={{
              verticalLineWidth: 1,
              axisLabel: 'Y Units',
              axisLabelAlignment: 'middle',
              rotateAxisLabel: true,
              numberOfTicks: 2,
              hideMarkers: true,
            }}
            xAxisProps={{
              axisLabel: 'X Units',
            }}
            toolTipProps={{
              toolTipTextRenderers: [
                ({ scaleY, y }) => ({
                  text: scaleY
                    .invert(y)
                    .toFixed(1)
                    .toString(),
                }),
              ],
            }}
          />