Cheers @adithya, that worked!
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