title: How to fill gradient to x-axis in Victory chart
body: <p>I am trying to fill the same gradient like filled in area of chart to x-axis. Like in the image given below. How can we do that. What I am missing here? </p>
  
  <p>Please assist.</p>
  
  <p>I tried giving <code>fill: "url(#myGradient)",</code> to the <code>VictoryAxis</code> style object. But seems not working.</p>
  
  <p><a href="https://i.stack.imgur.com/tCbai.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tCbai.png" alt="enter image description here"></a></p>
  
  <p>Here is my code.</p>
  
  <pre><code>import React from 'react';
  import { VictoryChart, VictoryStack, VictoryGroup, VictoryArea, VictoryPortal, VictoryScatter, VictoryAxis, VictoryTheme } from 'victory';
  
  class VictoryDemo1 extends React.Component {
      render() {
  
          return (
              &lt;div&gt;                
                  &lt;div className="chart-areea"&gt;
                      &lt;div className="victory-chart"&gt;
                          &lt;h2&gt;Victory&lt;/h2&gt;
                          &lt;svg style={{ height: 0 }}&gt;
                              &lt;defs&gt;
                                  &lt;linearGradient id="myGradient"&gt;
                                      &lt;stop offset="0%" stopColor="red" /&gt;
                                      &lt;stop offset="25%" stopColor="orange" /&gt;
                                      &lt;stop offset="50%" stopColor="gold" /&gt;
                                      &lt;stop offset="75%" stopColor="yellow" /&gt;
                                      &lt;stop offset="100%" stopColor="green" /&gt;
                                  &lt;/linearGradient&gt;
                              &lt;/defs&gt;
                          &lt;/svg&gt;
                          &lt;VictoryChart
                              scale={{ x: "time" }} width={400} height={400}&gt;
                              &lt;VictoryStack colorScale={["#005aff50"]}&gt;
                                  &lt;VictoryGroup
                                      data={[
                                          { x: new Date(1986, 1, 1), y: 0 },
                                          { x: new Date(1996, 1, 1), y: 4 },
                                          { x: new Date(2006, 1, 1), y: 1 },
                                          { x: new Date(2016, 1, 1), y: 0 }
                                      ]}
                                  &gt;
                                      &lt;VictoryArea
                                          style={{
                                              data: { fill: "url(#myGradient)" }
                                          }}
                                          interpolation="natural"
                                      /&gt;
                                      &lt;VictoryPortal&gt;
                                          &lt;VictoryScatter
                                              style={{ data: { fill: "red" } }}
                                          /&gt;
                                      &lt;/VictoryPortal&gt;
                                  &lt;/VictoryGroup&gt;
  
                              &lt;/VictoryStack&gt;
  
                              &lt;VictoryAxis
                                  style={
                                      {
                                          axis: {
                                              stroke: 'url(#myGradientk',
                                              fill: "url(#myGradient)",
                                              strokeWidth:10
                                          },
                                          ticks: {
                                              size: 15,
                                              stroke: 'black',
                                              strokeOpacity: 0.2,
                                              strokeDasharray: '5, 5',
                                          },
                                          grid: {
                                              stroke: 'rgba(0, 0, 0, 0.2)',
                                              strokeWidth: 1,
                                              strokeDasharray: '5, 5',
                                          },
                                          tickLabels: {
                                              fontSize: '9px',
                                              fontFamily: 'inherit',
                                              fillOpacity: 1,
                                              marginLeft: 10,
                                              padding: 0
                                          },
                                          axisLabel: {
                                              fontsize: 13
                                          }
                                      }
                                  }
  
                              /&gt;
                              &lt;VictoryAxis dependentAxis
                                  label="Audience Size"
                              /&gt;
                          &lt;/VictoryChart&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default VictoryDemo1;
  </code></pre>