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, VictoryVoronoiContainer, VictoryArea, VictoryGroup, VictoryTooltip } = Victory;
const renderTarget = document.getElementById('app');



class App extends React.Component {

  render() {
  const data = [
      {
        x: new Date("2019-05-08T08:30:15.000Z"),
        y: 0
      },
      {
        x: new Date("2019-05-14T14:18:46.000Z"),
        y: 1
      },
      {
        x: new Date("2019-05-15T07:40:43.000Z"),
        y: 0
      },
      {
        x:new Date( "2019-05-15T07:40:44.000Z"),
        y: 1
      },
      {
        x: new Date("2019-05-15T14:09:41.000Z"),
        y: 0
      },
      {
        x: new Date("2019-05-15T14:10:55.000Z"),
        y: 1
      },
      {
        x: new Date("2019-05-15T14:11:15.000Z"),
        y: 0
      },
      {
        x:new Date( "2019-06-07T08:30:15.000Z"),
        y: 0
      }
    ]
    return (
      <div>
        <VictoryChart scale={{x: "time"}} 
        domainPadding={{y: 50}}
        containerComponent={<VictoryVoronoiContainer/>}
        >
         
            <VictoryArea
              data={data}
              interpolation='stepAfter'
              labelComponent={<VictoryTooltip/>}
              labels={data.map(d => d.x)}
               domain=
               {
               {y: [0,1]}, 
               {x: [
                new Date('2019-05-08T08:30:15.000Z'), 
                new Date('2019-06-07T08:30:15.000Z')]
               }}
            />
          
        </VictoryChart>
      </div>
    );
  }
}
 
ReactDOM.render(<App/>, renderTarget);