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 Chart extends React.Component {
  render() {
  const option = {
            title:{
              text: "Basic Column Chart"
            },
            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 (
    <DropdownButton id="dropdown-item-button" title="Select" onSelect={function(e) {console.log(e)}}>
        <Dropdown.ItemText>Select Column</Dropdown.ItemText>
        <Dropdown.Item eventKey="15" as="button">>15</Dropdown.Item>
        <Dropdown.Item eventKey="25" as="button">>25</Dropdown.Item>
        <Dropdown.Item eventKey="30" as="button">>30</Dropdown.Item>
      </DropdownButton>
      <div id="chartContainer" style={{height: 360 + "px", width: 100 + "%"}}>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Chart />,
  document.getElementById('root')
);