Stacked Area with Dates

by amrendra kumar

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://npmcdn.com/[email protected]/dist/victory.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<div id="app"></div>

Babel + JSX

/* Victory requires `react@^15.5.0` and `prop-types@^15.5.0` */
const { VictoryChart, VictoryStack, VictoryArea, VictoryGroup } = Victory;
const renderTarget = document.getElementById('app');

class App extends React.Component {

  render() {
    return (
      <div>
        <VictoryChart scale={{x: "time"}} domainPadding={{y: 50}} >
        <VictoryGroup
  offset={25}
  style={{
    data: {
      fillOpacity: 0.7, stroke: "black", strokeWidth: 3
    }
  }}
>
         
            <VictoryArea
              data={[
                {x: new Date(2018, 1, 1), y: 3}, 
                {x: new Date(2018, 1, 2), y: 2}, 
                {x: new Date(2018, 1, 3), y: 5}, 
                {x: new Date(2018, 1, 4), y: 6},
                {x: new Date(2018, 1, 5), y: 1},
              ]}
              interpolation='stepAfter'
              style={{
            	data: {fill: "rgb(87, 148, 102)", stroke: "black",  }
            }}

            
           domain={{y: [1,2,3,4,5, 6]}}
            />
            
            </VictoryGroup>
            
       
        </VictoryChart>
      </div>
    );
  }
}
 
ReactDOM.render(<App/>, renderTarget);