JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://omnipotent.net/jquery.sparkline/2.0/jquery.sparkline.js"></script>


<div class="sparkline" 
                        data-type="line" 
                        data-resize="true" 
                        data-height="80" 
                        data-width="100%" 
                        data-line-width="2"
                        data-bar-width="5" 
                        data-line-color="#e74c3c" 
                        data-fill-color="#ffada4" 
                        data-highlight-line-color="#e1e5e9" 
                        data-spot-radius="5" 
                        data-data="[120,250,200,325,400,380,250,320,345,250,250,250,200,325,300,365,250,210,200,180,150,160,250,250,250,200,300,310,330,250,320,205]" 
                        data-composite-data="[160,230,250,300,320,330,280,260,250,280,250,260,250,255,330,345,300,210,200,200,170,180,250,250,200,200,280,270,310,250,280,175]" 
                        data-composite-line-width="20"  
                        data-composite-bar-width="2" 
                        data-composite-line-color="#a3e2fe" 
                        data-composite-fill-color="#e3f6ff">
                      </div>

JavaScript

values = [0,8, 15, 10, 50, 25, 35, 70];
$('.sparkline').sparkline(values, {
    type: 'bar',
    height: '200px',
    barWidth: 20,
    barSpacing: 10,
    barColor: '#56aaff',
    zeroColor: '#000000',
    enableTagOptions: true,
    tagValuesAttribute: 'data-values',
    colorMap: ["red", "green", "blue", "yellow", "orange", "#f2f2f2", "maroon", "pink"]

});