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

JavaScript

var data = [ { 'Year':  new Date( '2010' ), 'Births': 4268, 'Deaths': 2586 }, [ new Date( '2011' ),4311,2611 ], [ new Date( '2012' ),4351,2636 ], [ new Date( '2013' ),4388,2662 ], [ new Date( '2014' ),4423,2688 ], [ new Date( '2015' ),4455,2715 ], [ new Date( '2016' ),4484,2743 ], [ new Date( '2017' ),4512,2772 ], [ new Date( '2018' ),4539,2802 ], [ new Date( '2019' ),4565,2834 ], [ new Date( '2020' ),4590,2867 ], [ new Date( '2021' ),4615,2902 ], [ new Date( '2022' ),4639,2939 ], [ new Date( '2023' ),4663,2978 ], [ new Date( '2024' ),4687,3020 ], [ new Date( '2025' ),4712,3064 ], [ new Date( '2026' ),4738,3110 ], [ new Date( '2027' ),4765,3158 ], [ new Date( '2028' ),4794,3209 ], [ new Date( '2029' ),4825,3262 ], [ new Date( '2030' ),4858,3316 ], [ new Date( '2031' ),4893,3372 ], [ new Date( '2032' ),4931,3429 ], [ new Date( '2033' ),4970,3487 ], [ new Date( '2034' ),5011,3545 ], [ new Date( '2035' ),5052,3604 ], [ new Date( '2036' ),5095,3661 ], [ new Date( '2037' ),5138,3718 ], [ new Date( '2038' ),5180,3774 ], [ new Date( '2039' ),5223,3828 ], [ new Date( '2040' ),5265,3881 ], [ new Date( '2041' ),5307,3931 ], [ new Date( '2042' ),5348,3978 ], [ new Date( '2043' ),5388,4023 ], [ new Date( '2044' ),5428,4064 ], [ new Date( '2045' ),5467,4103 ], [ new Date( '2046' ),5505,4138 ], [ new Date( '2047' ),5542,4171 ], [ new Date( '2048' ),5579,4201 ], [ new Date( '2049' ),5616,4226 ], [ new Date( '2050' ),5653,4249 ] ];

Gable( 'population_area' )
.add( {
    value: data
  , meta: {
        title: 'Projected Births And Deaths By Year'
  }
} )
.draw( {
    target: 'example12'
  , type: 'stepped'
  , meta: {
      backgroundColor: '#FDF6E3'
      , legend: { textStyle: { fontSize: 11 } }
      , titleTextStyle: { color: 'black', fontSize: 14 }
    }
} );