Node program to use CanvasXpress with React
npm install canvasxpress-react --save1- Create a React App
Refer to documentation on Creating a New React App for more info.
2- Install canvasxpress-react
See the above Installation section!
3- Import CanvasXpress React Component
Add the following code to your app eg, index.js.
import React from 'react';
import ReactDOM from 'react-dom';
import CanvasXpressReact from 'canvasxpress-react';
class Bar extends React.Component {
render() {
var target = "canvas";
var data = {
"y" : {
"vars" : ["Variable1"],
"smps" : ["Sample1", "Sample2", "Sample3"],
"data" : [[33, 48, 55]]
}
};
var config = {
"graphOrientation": "vertical",
"graphType": "Bar",
"theme": "CanvasXpress",
"title": "Simple Bar graph"
};
return (
<CanvasXpressReact target={target} data={data} config={config} width={500} height={500} />
)
}
}
var reactapp = document.createElement("div");
document.body.appendChild(reactapp);
ReactDOM.render(<Bar />, reactapp)Link to codesandbox repo (contributed by Kamile Taouk - https://github.com/ktaouk1) :
https://codesandbox.io/p/sandbox/canvasxpress-react-dmdpd4