JSFiddle - React, Tailwind, and code Playground

by cristiscu

HTML

<script type="text/javascript" src="http://www.jqplot.com/deploy/dist/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.ohlcRenderer.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.cursor.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.css" />

JavaScript

$(document).ready(function(){ 
    var catOHLC = [[1, 138.7, 139.68, 135.18, 135.4],
    [2, 143.46, 144.66, 139.79, 140.02],
    [3, 140.67, 143.56, 132.88, 142.44],
    [4, 136.01, 139.5, 134.53, 139.48],
    [5, 143.82, 144.56, 136.04, 136.97],
    [6, 136.47, 146.4, 136, 144.67],
    [7, 124.76, 135.9, 124.55, 135.81],
    [8, 123.73, 129.31, 121.57, 122.5]];
     
    var ticks = ['Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'];
         
    var plot4 = $.jqplot('chart4',[catOHLC],{
      axes: {
          xaxis: {
              renderer:$.jqplot.CategoryAxisRenderer,
              ticks:ticks
          },
          yaxis: {
              tickOptions:{ prefix: '$' }
          }
      },
      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}]
    });
});