JSFiddle - React, Tailwind, and code Playground

by Regisc

HTML

<script src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="http://www.jqplot.com/src/jquery.jqplot.min.css">
<div id="chart2"></div>

JavaScript

$(document).ready(function(){
    var learnerWeek = [[3, 0, '3'], [6, 1, '6'], [9, 2, '9'],
                [12,3, '12'], [15, 4, '15'], [29, 5, '29'], [36, 6, '36']];
    var managerWeek = [[3, 0, '3'], [6, 2, '6'], [9, 4, '9'],
                [12, 6, '12'], [15, 8, '15'], [29, 15, '29'], [36, 12, '36']];
    var plot2 = $.jqplot('chart2', [learnerWeek, managerWeek], {
        title: 'Point Labels From Extra Series Data', 
        seriesDefaults: {
          showMarker:false, 
          pointLabels:{ show:true, location:'s', ypadding:3 }
        },
        axes:{ yaxis:{ pad: 1.3 } }
    });
    /*
    $.jqplot('chart2', [],
        {
            axes: {
                yaxis: { tickOptions: { show: false}, min: 0, max: 100, label: 'Participation Rate', labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
                xaxis: { min: 3, max: 36, label: 'Week', tickOptions: { formatString: '%d' } }
            },
            seriesDefaults: {
                pointLabels: {show: true, location: 's'},
                showMarker: false ,
                rendererOptions: {
                    diameter: undefined, // diameter of pie, auto computed by default.
                    padding: 10,        // padding between pie and neighboring legend or plot margin.
                    fill: true,         // render solid (filled) slices.
                    shadowOffset: 2,    // offset of the shadow from the chart.
                    shadowDepth: 15,     // Number of strokes to make when drawing shadow.  Each stroke
                    // offset by shadowOffset from the last.
                    shadowAlpha: 1   // Opacity of the shadow
                }
            },
            seriesColors: ['#3591cf', '#ef4058', '#73C774', '#C7754C', '#17BDB8']
    });
    */
});