Wondering what’s next for npm?Check out our public roadmap! »

    canvasxpress-react

    34.3.17 • 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

    244

    Version

    34.3.17

    License

    GPL-3.0-or-later

    Unpacked Size

    3.72 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar