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='example4'></div>
    </body>
</html>

JavaScript

var data = [
        { 'Food': 'Apple Pie', 'kCal': 405 }
        , [ 'Beer, Light', 95 ]
        , [ 'Carrots, Raw, Whole', 30 ]
        , [ 'Doughnuts, Cake Type, Plain', 210 ]
        , [ 'Enchilada', 235 ]
        , [ 'Froot Loops Cereal', 110 ]
        , [ 'Grape Soda', 180 ]
        , [ 'Hamburger, 4oz Patty', 445 ]
];

Gable( 'food_data_pie' )
.add( {
    value: data
  , meta: {
        title: 'USDA Nutrient Database'
  }
} )
.draw( {
    target: 'example4'
  , type: 'pie'
  , meta: {
      backgroundColor: '#FDF6E3'
      , height: 400
      , series: [ { color: '#586E75' }, { color: '#EEE8D5' } ]
      , legend: { position: 'bottom', textStyle: { color: 'black', fontSize: 16 } }
    }
} );