JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Gable.js</title>
        <script src="https://raw.github.com/editor/Gable/master/gable.js"></script>
    </head>
    <body>
        <div id='example2'></div>
    </body>
</html>

JavaScript

var data = [
        { 'Food': 'Apple Pie', 'Weight (g)': 158, 'kCal': 405 }
        , [ 'Beer, Light', 355, 95 ]
        , [ 'Carrots, Raw, Whole', 72, 30 ]
        , [ 'Doughnuts, Cake Type, Plain', 50, 210 ]
        , [ 'Enchilada', 230, 235 ]
        , [ 'Froot Loops Cereal', 28.35, 110 ]
        , [ 'Grape Soda', 372, 180 ]
        , [ 'Hamburger, 4oz Patty', 174, 445 ]
];

Gable( 'food_data_bar' )
.add( {
    value: data
  , meta: {
        title: 'USDA Nutrient Database'
  }
} )
.draw( {
    target: 'example2'
  , type: 'bar'
  , meta: {
      height: 450
      , width: 375
      , isStacked: true
      , backgroundColor: '#FDF6E3'
      , series: [ { color: '#586E75' }, { color: '#EEE8D5' } ]
    }
} );