Test

HTML

<link rel="stylesheet" href="https://rawgit.com/grommet/grommet/stable/grommet-hpe.min.css">
<link rel="stylesheet" href="https://rawgit.com/grommet/grommet-index/stable/grommet-index.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://rawgit.com/grommet/grommet/stable/grommet.min.js"></script>
<script src="http://codepen.io/grommet/pen/pbxYby"></script>
<div id="content"></div>

Babel + JSX

var Meter = Grommet.Meter;
class HelloWorldApp extends React.Component {
  render () {
    return (
      <Grommet.App>
        <Grommet.Title>Hello World</Grommet.Title>
        <p>Hello from a Grommet page!</p>
        <Grommet.Chart vertical={true}>
          <Grommet.Base height='medium'
            width='medium' />
          <Grommet.Layers>
            <Grommet.Bar values={[45, 25, 60, 12, 35, , 10, 45, 60, 85, 70, 20]}
              colorIndex='graph-2'
              activeIndex={11} />
          </Grommet.Layers>
          <Grommet.Legend series={[{"label": "Honeydew", "colorIndex": "graph-1"}, {"label": "Orange", "colorIndex": "graph-2"}, {"label": "Blueberry", "colorIndex": "graph-3"}]}/>
        </Grommet.Chart>
      </Grommet.App>
    );
  }
};

var element = document.getElementById('content');
ReactDOM.render(<HelloWorldApp />, element);