Need private packages and team management tools?Check out npm Teams »

canvasxpress-react

27.8.23 • Public • Published

CanvasXpress React

Node program to use CanvasXpress with React

Installation

npm install canvasxpress-react --save

Step-By-Step instructions

1- Create a React App

Refer to documentation on Creating a New React App for more info.

2- Install canvasxpress-react

See above!

3- Import CanvasXpress React Component

Add the following code to your app.

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)

CanvasXpress Homepage

https://www.canvasxpress.org

CanvasXpress R-Package

https://github.com/neuhausi/canvasXpress

Install

npm i canvasxpress-react

DownloadsWeekly Downloads

115

Version

27.8.23

License

GPL-3.0-or-later

Unpacked Size

3.72 kB

Total Files

3

Last publish

Collaborators

  • avatar