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

JavaScript

var data = [
        { 'Year': '2008', 'Q1': -1.8, 'Q2': 1.3, 'Q3': -3.7, 'Q4': -8.9, 'Avg': ( ( -1.8 + 1.3 + -3.7 + -8.9 ) / 4 ) }
        , [ '2009', -6.7, -0.7, 1.7, 3.8, ( ( -6.7 + -0.7 + 1.7 + 3.8 ) / 4 ) ]
        , [ '2010', 3.9, 3.8, 2.5,  2.3, ( ( 3.9 + 3.8 + 2.5 + 2.3 ) / 4 ) ]
];

Gable( 'gdp_combo' )
.add( {
    value: data
  , meta: {
        title: 'Quarterly GDP'
  }
} )
.draw( {
    target: 'example11'
  , type: 'combo'
  , meta: {
      height: 450
      , width: 375
      , seriesType: 'bars'
      , series: { 4: { type: "line" } }
      , titleTextStyle: { color: 'black', fontSize: 18 }
      , backgroundColor: '#FDF6E3'
    }
} );