<div id="app"></app>
html, body
  height: 100%
  
body
  background: #333
  display: flex
  justify-content: center
  align-items: center
  font-family: Helvetica Neue
  
h1
  font-size: 2em
  color: #eee
  display: inline-block

a
  color: white
p
  margin-top: 1em
  text-align: center
  color: #aaa
View Compiled
/* App.js */
import CanvasJS from './canvasjs.min'
var React = require('react');
var Component = React.Component;
var CanvasJSReact = require('./canvasjs.react');

// var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
var startTime = 0, endTime = 0;
 
class App extends Component { 
  render() {
    const options = {
      title: {
        text: "Basic Column Chart in React"
      },
      data: [{        
                type: "column",
                dataPoints: [
                    { label: "Apple",  y: 10  },
                    { label: "Orange", y: 15  },
                    { label: "Banana", y: 25  },
                    { label: "Mango",  y: 30  },
                    { label: "Grape",  y: 28  }
                ]
       }]
   }
    
   return (
      <div>
        <CanvasJSChart options = {options}
            /* onRef = {ref => this.chart = ref} */
        />
      </div>
    );
  }
}

export default App;
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js