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/stocChart.min1.0.js"></script>
<div id='basicLineChart'></div>

CSS

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

JavaScript

var basicLineData =
  [
    {    
     "Name" : "Angel",
     "Shape" : "circle",
     "color": "brown",
     "Values" : [{"value": 12345}, {"value": 42345.23}, {"value": 30234}, {"value": 22345}, {"value": 72345}, {"value": 22345}, {"value": 32345},
        {"value": 70345}, {"value": 52345}, {"value": 78345}]
    },
    {
     "Name" : "Venture",
     "Shape" : "square",
     "color": "orange",
     "Values" : [{"value": 90234}, {"value": 90234.34}, {"value": 12034}, {"value": 22394}, {"value": 72934}, {"value": 62394}, {"value": 32374}, {"value": 9234},
       {"value": 5234}, {"value": 56034}]   
    },
    {
     "Name" : "Micro",
     "Shape" : "triangle",
     "color": "blue",
     "Values" : [{"value": 33340}, {"value": 62304}, {"value": 67214}, {"value": 6734}, {"value": 90734}, {"value": 12034}, {"value": 43240}, {"value": 42340},
       {"value": 15234}, {"value": 100034}]   
    },
    {
     "Name" : "Capital",
     "Shape" : "circle",
     "color": "cyan",
     "Values" : [{"value": 68333}, {"value": 23304}, {"value": 90314}, {"value": 9734}, {"value": 19734}, {"value": 90834}, {"value": 67240}, {"value": 82340},
       {"value": 51234}, {"value": 97034}]   
    }
    
  ];
  
  var cfgBasicLine =  {
  
   padding :30,
   yAxisfactor : "Sold Quantity(last 10 days)",
   yLabelColor:"red",
   xAxisfactor : "Indexes(in whole number)",
   xLabelColor:"green"   
  }

  
$(document).ready(function(){
    
   var stocChart1=$("#basicLineChart").stocCharts();
   stocChart1.drawBasicLineChart('#line1', basicLineData, cfgBasicLine); 
});