Reply To: Integrate performance chart with React

[Jeremy]

Thank you for the help @Adithya.

I was able to start up my project using that sample.
I have another question regarding referencing the chart so that I can update it through functions.

I call my chart component as such:

<CanvasJSChart options = {options} onRef={ref => this.chart = ref}/>

How do I then change the options and render the chart again?
I have looked at the documentation and that doesn’t not show how to do it in JSX

Here is my entire App.js for reference:

import React, { Component } from “react”;
import { render } from “react-dom”;
import CanvasJSReact from “./canvasjs.react”;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
var startTime = 0, endTime = 0;

const ChangeSize = (CanvasJSChart) => {
CanvasJSChart.options.width = 326
CanvasJSChart.render()
}

class App extends Component {
componentDidMount() {
endTime = new Date();
// document.getElementById(“timeToRender”).innerHTML = “Time to Render: ” + (endTime – startTime) + “ms”;
}

render() {
var limit = 100000;
var y = 100;
var data = [];
var dataSeries = { type: “spline”, name: “first” };
var dataPoints = [];

for (var i = 0; i < limit; i += 1) {
y += Math.round(Math.random() * 1000 – 500);
dataPoints.push({
x: i,
y: y
});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);

const spanStyle = {
position:’absolute’,
top: ’10px’,
fontSize: ’20px’,
fontWeight: ‘bold’,
backgroundColor: ‘#d85757’,
padding: ‘0px 4px’,
color: ‘#ffffff’
}

const options = {
zoomEnabled: true,
animationEnabled: true,
title: {
text: “Can bus log”
},
data: data // random data
}

startTime = new Date();

return (
<>
<CanvasJSChart options = {options} onRef={ref => this.chart = ref}/>

{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}

<button onClick={this.handleClick}>{“Export Chart”}</button>

<span id=”timeToRender” style={spanStyle}></span>

</>
);
}
}

export default App