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>
<!--
   <VictoryAxis dependentAxis
    domain={{x: [-30, 30], y: [0.9, 10000]}}
    tickValues={[0,100,2000,30000,400000]}
    scale={{y: 'log'}}
              offsetX={50}
            orientation="left"
       style={{
    axis: {
        stroke: "#333333",
        fontSize: 8, 

      },
    ticks: {
        strokeWidth: 3,
        stroke: "#333333",
        fontSize: 8, 
        
       
     },
      tickLabels: {
          fill: "black",
          fontFamily: "Arial",
          fontSize: 7
        }
  }}
        />
-->

CSS

@import url('https://fonts.googleapis.com/css?family=Saira+Semi+Condensed:300');

Babel + JSX

const {VictoryChart, VictoryLabel, VictoryArea, VictoryClipContainer, VictoryAxis, VictoryTheme} = Victory;

class App extends React.Component {
  render() {
    return (
      <div>
         <svg>
          <defs>
            <linearGradient id="myGradient">
              <stop offset="30%"  stopColor="#94b60a"/>
              <stop offset="70%" stopColor="#c00000" />
            </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: 7, fill: "#888888", angle: -90, verticalAnchor:"middle",fontFamily: "Saira Semi Condensed",textAnchor:"start", padding:10 }}
              
            }
           scale={{y: 'log'}}
           interpolation="step"
           domain={{x: [-30, 30], y: [0.9, 400000]}}
          
           data={[
                  {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,...