JSFiddle - React, Tailwind, and code Playground

by Arun P Johny

HTML

<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.logAxisRenderer.js"></script>
<link rel="stylesheet" href="http://www.jqplot.com/deploy/dist/jquery.jqplot.css">
<script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.cursor.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.json2.min.js"></script>
<div id="chart1" style="height:200px; width:600px;"></div>

JavaScript

line1 = [["6/22/2009 10:00",425.32], ["6/22/2009 11:00",424.84], ["6/22/2009 12:00",417.23], ["6/22/2009 13:00",390], 
    ["6/22/2009 14:00",393.69], ["6/22/2009 15:00",392.24], ["6/22/2009 16:00",369.78], ["6/22/2009 17:00",330.16], ["6/22/2009 18:00",308.57], 
    ["6/22/2009 19:00",346.45], ["6/22/2009 20:00",371.28], ["6/22/2009 21:00",324.7]];
        
        line2 = [["6/23/2009 10:00",325.32], ["6/23/2009 11:00",324.84], ["6/23/2009 12:00",217.23], ["6/23/2009 13:00",190], 
    ["6/23/2009 14:00",593.69], ["6/23/2009 15:00",292.24], ["6/23/2009 16:00",369.78], ["6/23/2009 17:00",330.16], ["6/23/2009 18:00",308.57], 
    ["6/23/2009 19:00",446.45], ["6/23/2009 20:00",241.28], ["6/23/2009 21:00",624.7]];

    var plot1 = $.jqplot('chart1', [line1,line2], { 
        title: 'XYZ, Inc.', 
        series: [{ 
            label: 'XYZ, Inc.', 
            neighborThreshold: -1 
        }], 
        axes: { 
            xaxis: { 
                renderer:$.jqplot.DateAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                  angle: -30
                } 
            }, 
            yaxis: {  
                renderer: $.jqplot.LogAxisRenderer,
                tickOptions:{ prefix: '$' } 
            } 
        }, 
        cursor:{
            show: true, 
            zoom: true
        } 
    });