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
