JSFiddle - React, Tailwind, and code Playground

by yrshaikh

HTML

<script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.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.cursor.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.dragable.min.js"></script>
<div id="chart"></div>

CSS

m

JavaScript

$(document).ready(function () {
 
  $.jqplot.config.enablePlugins = true;
 
  s1 = [['23-May-08',1, 11],['24-May-08',4, 14],['25-May-08',2, 22],['26-May-08', 6, 26]];
  s2 = [['23-May-08',11, 1],['24-May-08',14, 4],['25-May-08',22, 2],['26-May-08', 26, 6]];
 
  plot1 = $.jqplot('chart',[s1, s2],{
     title: 'Highlighting, Dragging, Cursor and Trend Line',
     axes: {
         xaxis: {
             renderer: $.jqplot.DateAxisRenderer,
             tickOptions: {
                 formatString: '%#m/%#d/%y'
             },
             numberTicks: 4
         },
         yaxis: {
             tickOptions: {
                 formatString: '$%.2f'
             }
         }
     },
     highlighter: {
         show:true,
         //tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
         //useAxesFormatters: false
     },
     cursor: {
         show: true
     },
      series: [
                    {
                        lineWidth: 2,
                        highlighter: { formatString: "<div style='background-color:white; border:1px #ddd solid; width:220px; height:60px'>%s . Revenue : %s Views : %s </div>" }
                    },
                    {
                        yaxis: 'y2axis',
                        highlighter: { formatString: "<div style='background-color:white; border:1px #ddd solid; width:220px; height:60px'>%s . Views : %s Revenue : %s </div>" }
                    }]
  });
});