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, VictoryLabel,VictoryLine, VictoryArea, VictoryClipContainer, VictoryAxis, VictoryTheme} = Victory;

class App extends React.Component {
  render() {
    return (
      <div>
         <svg>
          <defs>
            <linearGradient id="myGradient" >
              <stop offset="0%"  stopColor="#c00000"/>
              <stop offset="50%" stopColor="#94b60a"/>
            </linearGradient>
          </defs>
        </svg>
        <VictoryChart
         width={800}
          height={200}
         
          >
          <VictoryArea 
         
           groupComponent={<VictoryClipContainer clipPadding={{ top: 5, right: 10 }}/>}
           style={{ 
           	data: { stroke: "url(#myGradient)", 
              fill:"url(#myGradient)", 
              fillOpacity: 0.4, 
              strokeWidth: 1, 
              strokeLinecap: "square", 
              }, 
            	labels: { fontSize: 8, fill: "#888888", angle: -90, verticalAnchor:"start", gutter:10 }}
            }
           
           interpolation="stepAfter"
           /*domain={{x: [-30, 30], y: [0, 400000]}}*/
             labels={(d) => d.y}
           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},
       ...