Basic Column Chart - ReactJS - CanvasJS JavaScript Charts

Basic Column Chart - ReactJS - CanvasJS JavaScript Charts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="root"></div>

Babel + JSX

class App extends Component {	
  render() {
	var options = [];
  for(var i = 0; i<2; i++) {
    options.push = ({
      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>
      {options.map((ele,index) => (
      <div key={index}>
        <CanvasJSChart options = {ele}/* onRef = {ref => this.chart = ref} */
        />
      </div>
      
      ))}
      </div>
    );
  }
}