Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including canvasxpress-react with all npm packages installed. Try it out:

var canvasxpressReact = require("canvasxpress-react")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

canvasxpress-react v28.6.28

Node program to run canvasXpress with react

CanvasXpress React

Node program to use CanvasXpress with React


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");
ReactDOM.render(<Bar />, reactapp)

CanvasXpress Homepage

CanvasXpress R-Package

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free