Animation not working after render. I want after 5 seconds animation show from 0

[Friday096]

/* eslint-disable */

import Container from ‘react-bootstrap/Container’;
import { useState,useEffect } from ‘react’;
import Row from ‘react-bootstrap/Row’;
import Col from ‘react-bootstrap/Col’;
import ‘./App.css’;
import ‘./assets/css/style.css’;
import ‘bootstrap/dist/css/bootstrap.min.css’;
import Header from ‘./Component/Header/header’;
import { faPaperPlane } from ‘@fortawesome/free-solid-svg-icons’;

import { Table, Tab, Tabs,Button, InputGroup, FormControl, FloatingLabel, Form } from ‘react-bootstrap’;

import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’;
// import ApexCharts from ‘apexcharts’;
function App() {
const [key, setKey] = useState(‘active’);
const [key1, setKey1] = useState(‘Manual’);
const [xval, setXval] = useState(20);
const [yval, setYval] = useState(30);

var CanvasJSReact = require(‘./assets/canvas/canvasjs.react’);
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.default.CanvasJSChart

useEffect(() => {

setInterval(() => {
var xval = setXval(Math.floor(Math.random() * 20));
var yval = setYval(Math.floor(Math.random() * 30));
console.log(‘xval’, xval, yval);
}, 5000);
}, []);

// setXval()
// setYval()
var points_val = [{ x: 0, y: 0 }, { x: xval, y: yval}]
var options = {
animationEnabled: true,
animationDuration: 4000,
title: {
text: “Line Chart”
},
axisX: {
title: “Axis X Title”,
labelAngle: 0,
minimum: 0
},
axisY: {
title: “Axis Y Title”,
gridThickness: 0,
},
data: [{
type: “line”,
dataPoints: points_val
}]
}

return (
<div className=”App “>
<Header />
<Container fluid className=’mt-2′>

<Row >
<Col xs={12} md={3}>
<div className=’chatbox’>
<div className=’text-center chatbox-head’>
<h4>Chat</h4>
</div>
<div className=’inputboxs’>
<form>
<InputGroup >
<FormControl
placeholder=”Message or /help”
aria-label=”Message or /help”
aria-describedby=”basic-addon2″
/>
<Button variant=”primary”><FontAwesomeIcon icon={faPaperPlane}/></Button>
</InputGroup>
</form>

</div>
</div>
</Col>
<Col xs={12} md={5}>
{/* <div id=”chart”>
</div> */}
<CanvasJSChart options = {options}
/* onRef={ref => this.chart = ref} */
/>
<div className=’bits’>
<Tabs
id=”controlled-tab-example”
activeKey={key1}
onSelect={(k) => setKey1(k)}
className=”my-3″
>
<Tab eventKey=”Manual” title=”Manual”>
<div className=’activechart’>
<Button variant=”primary” className=’buts’>Bet</Button>
</div>
<div className=’Base my-3′>
<Row className=”g-2″>
<Col md={8}>
<Form.Label className=’text-left’>Bet</Form.Label>
<InputGroup className=”mb-3″>
<Form.Select id=”button-addon1″ style={{paddingRight:0}} >
<option value=”btc”>BTC</option>
<option value=”etc”>ETC</option>
<option value=”bnb”>BNB</option>
</Form.Select>
<FormControl
placeholder=”bet”
aria-label=”bet”
type=’number’
aria-describedby=”basic-addon1″
/>
</InputGroup>

</Col>
<Col md={4}>
<Form.Label className=’text-left’>Auto Cash Out</Form.Label>
<Form.Control type=”number” placeholder=’auto cash out’ />

</Col>
</Row>
<Row>
<Col md>
<Button variant=”outline-primary” className=’form-control buts’>5%</Button>
</Col>
<Col md>
<Button variant=”outline-primary” className=’form-control buts’>10%</Button>
</Col>
<Col md>
<Button variant=”outline-primary” className=’form-control buts’>25%</Button>
</Col>
<Col md>
<Button variant=”outline-primary” className=’form-control buts’>50%</Button>
</Col>
</Row>

</div>
</Tab>
<Tab eventKey=”Auto” title=”Auto”>
<div className=’activechart’>
<div className=’activechart’>
<Button variant=”primary” className=’buts’>Bet</Button>
</div>
<div className=’Base my-3′>
<Row className=”g-2″>
<Col md={8}>
<Form.Label className=’text-left’>Bet</Form.Label>
<InputGroup className=”mb-3″>
<Form.Select id=”button-addon1″ style={{paddingRight:0}} >
<option value=”btc”>BTC</option>
<option value=”etc”>ETC</option>
<option value=”bnb”>BNB</option>
</Form.Select>
<FormControl
placeholder=”bet”
aria-label=”bet”
type=’number’
aria-describedby=”basic-addon1″
/>
</InputGroup>

</Col>
<Col md={4}>
<Form.Label className=’text-left’>Auto Cash Out</Form.Label>
<Form.Control type=”number” placeholder=’auto cash out’ />

</Col>
</Row>
<Row>
<Col md>
<Form.Label className=’text-left’>On Win :</Form.Label>
<div >
<Form.Check
inline
label=”Base Bet ”
name=”win”
type=”radio”
/>
<Form.Check
inline
label=”Increase Bet”
name=”win”
type=”radio”
/>
</div>
<Form.Control type=”number” placeholder=”Bet” />
</Col>
<Col md>
<Form.Label className=’text-left’>On Loss :</Form.Label>
<div >
<Form.Check
inline
label=”Base Bet ”
name=”loss”
type=”radio”
/>
<Form.Check
inline
label=”Increase Bet”
name=”loss”
type=”radio”
/>
</div>
<Form.Control type=”number” placeholder=”Bet” />
</Col>
</Row>

</div>
</div>
</Tab>
</Tabs>
</div>
</Col>
{/* ————Bet table and history table Start ——————*/}
<Col xs={12} md={4} className=”tabbet”>
<Tabs
id=”controlled-tab-example”
activeKey={key}
onSelect={(k) => setKey(k)}
className=”mb-3″
>
<Tab eventKey=”active” title=”Active Bet”>
<Table responsive >
<thead variant=”dark”>
<tr>
<th>Player</th>
<th>@ </th>
<th>Bet</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@mdo</td>
</tr>
<tr>
<td>3</td>
<td >Larry the Bird</td>
<td>@twitter</td>
<td>@mdo</td>
</tr>
</tbody>
</Table>
</Tab>
<Tab eventKey=”history” title=”History”>
<Table responsive >
<thead variant=”dark”>
<tr>
<th>Player</th>
<th>@ </th>
<th>Bet</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@mdo</td>
</tr>
<tr>
<td>3</td>
<td >Larry the Bird</td>
<td>@twitter</td>
<td>@mdo</td>
</tr>
</tbody>
</Table>
</Tab>
</Tabs>

</Col>
</Row>
</Container>
</div>
);
}

export default App;

[Manoj Mohan]

@friday096,

Sorry, it’s not possible to animate the chart every 5 seconds as the chart animates only on the first render, as of now.

—-
Manoj Mohan
Team CanvasJS

[Friday096]

https://www.bustabit.com/play
You look this website and i want like that graph.
Its possible in this?

[Manoj Mohan]

@friday096,

You can create similar graph that you are referring in the link shared above by creating a dynamic chart and by setting labelAutoFit to false as well as setting y-axis maximum. Please take a look at this StackBlitz project for an example on the same in React.

—-
Manoj Mohan
Team CanvasJS

[Friday096]

Thanks I want Like That. Can we remove that Canvas Trial on above written?

[Manoj Mohan]

@friday096,

CanvasJS commercial version doesn’t carry any watermark or credit link. You can purchase commercial version from the license page.

For further queries regarding commercial version, you can write to us at sales@canvasjs.com.

—-
Manoj Mohan
Team CanvasJS