title: React Victory Line Chart For 0-10 minute timeframe
body: <p>Could use some help trying to create a simple line chart with Victory.</p>
  
  <p><strong>What I'm trying to do:</strong></p>
  
  <p>I'm basically trying to create a line chart that shows random numbers for the last 10 minutes. I generate a new random number every 3 seconds, and add that num to the line chart.</p>
  
  <p>So the X-Axis should be from 0 minutes – 10 minutes, and the Y axis should be the actual rand num for a given time.</p>
  
  <p>My main problem is that I am pretty lost on how to go about creating the X axis from 0 – 10 minutes in 3 second intervals</p>
  
  <p><strong>What I have so far:</strong></p>
  
  <p>Here's a Code Sandbox with what I've done so far so you can try it out: <a href="https://codesandbox.io/s/6wnzkz512n" rel="nofollow noreferrer">https://codesandbox.io/s/6wnzkz512n</a></p>
  
  <p>The main <code>Chart</code> component:</p>
  
  <pre><code>import React from 'react'
  import { VictoryChart, VictoryLine, VictoryAxis } from 'victory'
  
  class Chart extends React.Component {
    constructor() {
      super()
      this.state = {
        data: []
      }
    }
  
    // Add a new data point every 3 seconds
    componentDidMount() {
      this.getRandNum()
      setInterval(this.getRandNum, 3000)
    }
  
    // get rand num from 1-5 along with current time,
    // and add it to data. not sure if this is right approach
    getRandNum = () =&gt; {
      const newData = {
        date: new Date(),
        num: Math.floor(Math.random() * 5) + 1
      }
  
      this.setState({
        data: [...this.state.data, newData]
      })
    }
  
    render() {
      return (
        &lt;VictoryChart width={600} height={470}&gt;
          &lt;VictoryLine
            style={{
              data: { stroke: 'lime' }
            }}
            data={this.state.data}
            x="date"
            y="num"
          /&gt;
        &lt;/VictoryChart&gt;
      )
    }
  }
  </code></pre>
  
  <hr>