JSFiddle - React, Tailwind, and code Playground

by Eduardo GarcĂ­a Sanz

HTML

<link rel="stylesheet" href="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.css">
<script src="http://www.jqplot.com/deploy/dist/excanvas.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.highlighter.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.barRenderer.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dragable.min.js"></script>
<div id="chart"></div>

CSS

#canvas {
    width: 400px;
    height: 300px;
    margin: 20px auto;
}

JavaScript

$(function(){
    
    $.jqplot.config.enablePlugins = true;
    
    var data = [['23-May-08', 1],['24-May-08', 4],['25-May-08', 2],['26-May-08', 6]];
    
    var chart = $.jqplot('chart', [data], {
        title : 'My Graph',
        seriesDefaults: {
            fill: true
        },
        axes : {
            xaxis : {
                label: 'My X axis',
                renderer: $.jqplot.DateAxisRenderer
            },
            
            yaxis : {
                label: 'My Y axis'
            }               
        },
        highlighter: {
            sizeAdjust: 10
        }
    });
    
    var log = function(seriesIndex, pointIndex, pixelposition, data) {
        
        console.log(chart.series[0].data);
        
    };
    
    $('#chart')
    .bind('jqplotSeriesPointChange', log)
    .bind('jqplotDragStop', log);
    
});