JSFiddle - React, Tailwind, and code Playground

by Sanchit Jain

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.stocinn.com/stoccharts/js/stocChart.js"></script>
<div id='stackedAreaChartMenu'></div>

CSS

#stackedAreaChartMenu{
    width:800px;
    height:400px;
   
}

JavaScript

var stackedAreaData = [
            {"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":34.6240,"name":"PRODUCT1","type":"area","band1Color":"#bb533f","metric1Label":""},
            {"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":31.7140,"name":"PRODUCT1","type":"area","band1Color":"#bb533f","metric1Label":""},
            {"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":34.8570,"name":"PRODUCT1","type":"area","band1Color":"#bb533f","metric1Label":""},
            {"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":144.4390,"name":"PRODUCT2","type":"area","band1Color":"#ba8e3e","metric1Label":""},
            {"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":153.1140,"name":"PRODUCT2","type":"area","band1Color":"#ba8e3e","metric1Label":""},
            {"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":126.4660,"name":"PRODUCT2","type":"area","band1Color":"#ba8e3e","metric1Label":""},
            {"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":13.0250,"name":"PRODUCT3","type":"area","band1Color":"#3ca2b8","metric1Label":""},
            {"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":6.0190,"name":"PRODUCT3","type":"area","band1Color":"#3ca2b8","metric1Label":""},
            {"layoutID":309,"nationalAvg":1,"category":"Feb","categoryorder":13,"y":5.3900,"name":"PRODUCT3","type":"area","band1Color":"#3ca2b8","metric1Label":""},
            {"layoutID":309,"nationalAvg":1,"category":"Dec","categoryorder":11,"y":99.8900,"name":"PRODUCT4","type":"area","band1Color":"#7929b2","metric1Label":""},
            {"layoutID":309,"nationalAvg":1,"category":"Jan","categoryorder":12,"y":79.9660,"name":"PRODUCT4","type":"area","band1Color":"#7929b2","metric1Label":""},
           ...