VictoryLine with Gradient

by bergb

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://npmcdn.com/victory@latest/dist/victory.min.js"></script>
<div id="app"></div>

Babel + JSX

const {VictoryChart, VictoryLine, VictoryAxis, VictoryTheme} = Victory;

class App extends React.Component {
  render() {
    return (
      <div>
        <svg>
          <defs>
            <linearGradient id="myGradient" x1="0%" y1="0%" x2="-100%" y2="100%">
              <stop offset="0%"   stopColor="green"/>
              <stop offset="100%" stopColor="red"/>
            </linearGradient>
          </defs>
        </svg>
        <VictoryChart>
          <VictoryLine 
            style={{
            	data: {stroke: "url(#myGradient)"}
             }} 
            
             data={[
      {x:-31, y:36898},
{x:-30, y:3359},
{x:-29, y:13},
{x:-28, y:73},
{x:-27, y:15},
{x:-26, y:13},
{x:-25, y:12},
{x:-24, y:14},
{x:-23, y:24},
{x:-22, y:18},
{x:-21, y:25},
{x:-20, y:24},
{x:-19, y:24},
{x:-18, y:28},
{x:-17, y:218},
{x:-16, y:23},
{x:-15, y:484},
{x:-14, y:29},
{x:-13, y:31},
{x:-12, y:25},
{x:-11, y:16},
{x:-10, y:45},
{x:-9, y:48},
{x:-8, y:197},
{x:-7, y:43},
{x:-6, y:57},
{x:-5, y:61},
{x:-4, y:72},
{x:-3, y:93},
{x:-2, y:176},
{x:-1, y:348},
{x:0, y:174960},
{x:1, y:36391},
{x:2, y:31218},
{x:3, y:46448},
{x:4, y:21201},
{x:5, y:18864},
{x:6, y:14477},
{x:7, y:16047},
{x:8, y:11723},
{x:9, y:11724},
{x:10, y:9161},
{x:11, y:8407},
{x:12, y:8049},
{x:13, y:8807},
{x:14, y:8435},
{x:15, y:7435},
{x:16, y:8560},
{x:17, y:7448},
{x:18, y:5777},
{x:19, y:6788},
{x:20, y:3453},
{x:21, y:2638},
{x:22, y:3102},
{x:23, y:1709},
{x:24, y:1710},
{x:25, y:1046},
{x:26, y:1364},
{x:27, y:1266},
{x:28, y:886},
{x:29, y:877},
{x:30, y:353065},
   					 ]}
          />
          <VictoryAxis dependentAxis
            offsetX={50}
          />
        </VictoryChart>
      </div>
    );
  }
} 
 
ReactDOM.render(<App/>, document.getElementById('app'));