JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js"></script>
<link rel="stylesheet" href="http://barebente.com/tmp/NScurrent09/css/bootstrap.css">
<p style="font-size: 17px;">
Positive-negative chart: <span class="testspark"></span>
</p>
<p style="font-size: 17px;">
Inline Sparkline: <span class="inlinesparkline">1,9,4,7,5,9,10,1,9,4,7, 5,9,10,1,9,4,7</span>.
</p>
<p style="font-size: 17px;">
Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>
</p>
<p style="font-size: 17px;">
Bar chart with dynamic data: <span class="dynamicbar">Loading..</span>
</p>
<p style="font-size: 17px;">
Bar chart with inline data: <span class="inlinebar">1,3,0,5,3,5,0,5,3,5, 0,0,2</span>
</p>
<p style="font-size: 17px;">
Nifty pie-chart: <span class="piechart"></span>
</p>
<p style="font-size: 17px;">
  Bullet-chart: <span class="slidingBullet"></span>
</p>

<p style="font-size: 17px;">
Descreet chart: <span class="descretespark"></span>
</p>
    <p style="font-size: 17px;">
    Composite chart 1: 
    <span id="composite1">4,3,3,1,4,3,2,2,1</span>
</p>


    <p style="font-size: 20px;">
   Composite chart 2: <span id="composite2"></span>
    </p>

JavaScript

$(function() {
        /** This code runs when everything has been loaded on the page */
        /* Inline sparklines take their values from the contents of the tag */
$(".inlinesparkline").sparkline([5,6,7,9,9,5,3,2,2,2,4,3,6,7,5, 9,5,3,2,2,2,4,3,6,7,5 ], {
    type: 'line',
    lineColor: '#ffffff',
    fillColor: 'transparent',
        lineWidth: 2,
    spotColor: '#ff5656',
    drawNormalOnTop: true});
        /* Sparklines can also take their values from the first argument 
        passed to the sparkline() function */
        var myvalues = [10,8,5,7,14,4,1,4,8,2,9,11,4,7,7,2];
        $('.dynamicsparkline').sparkline(myvalues);

$(".testspark").sparkline([5,6,7,2,0,-4,-2,4,1,12,4,5, ], {
    type: 'bar',
    barColor: '#18f4f4',
    negBarColor: '#fc5858',
    });



/*COMPOSITE SPARKLINE 1*/
$('#composite1').sparkline([5,6,7,9,9,5,3,2,2,4,6,7], {
    type: 'line',
    lineColor: 'white',
            lineWidth: 2,
    fillColor: 'transparent'
    });
$('#composite1').sparkline([1,2,3,4,3,2,4,1,3,0,2,4,5,8], {
type: 'bar',
barColor: '#DDF099',
composite: true});
/*COMPOSITE SPARKLINE 1 END*/







/*COMPOSITE SPARKLINE 2*/
$('#composite2').sparkline([1,2,3,4,7,9,5,3,1,1,0,0,9,9,8,5,4,5,3,2,1,1,1,1,1,1,1,9,9,9,6], {
    type: 'line',
    lineColor: 'white',
            lineWidth: 2,
    fillColor: 'transparent'
    });
    
$('#composite2').sparkline([11,11,11,11,4,3,2,1,1,1,1,4,5,6,7,8,9,10,1,0,3,3,2,2,1,0], {
    type: 'line',
    lineColor: '#F5C34E',
            lineWidth: 2,
    fillColor: 'transparent',
    composite: true});
/*COMPOSITE SPARKLINE 2 END*/








$(".piechart").sparkline([1,1,2], {
    type: 'pie',
    sliceColors: ['red','yellow','blue']});

$(".descretespark").sparkline([4,6,7,7,4,3,2,1,4,4,12,11,5,7,9,3,5,7,9,11,11,11,9,8,7,6,5,4,3,2,], {
    type: 'discrete',
    lineColor: '#f9f9d1'});


$(".slidingBullet").sparkline([10,12,12,9,7], {
    type: 'bullet',
    targetColor: '#ff7f00',
    performanceColor: '#cdcdf4'});


        /*...