JSFiddle - React, Tailwind, and code Playground
HTML
<h2>Total Daily Earnings</h2>
<div id="earnings_chart_frame">
<!-- line bar -->
</div>
CSS
.day {
background-color: #CDDEB6;
min-width: 0px;
color: black;
padding: 3px 6px;
margin-top: 5px;
font-size: 15px;
font-weight: 400;
font-family: arial;
white-space: nowrap;
display: block;
text-align: left;
}
JavaScript
var chartMAX = 250
var chartMIN = 0
var highestDay = 59332
var lowestDay = 12998
var Earnings = { 1:42541, 2:23086, 3:14243, 4:36765, 5:8998, 6:998, 7:5234, 8:59332, 9:24353, 10:39911, 11:34256, 12:104, 13:12433, 14:9101 }
var chartLineBase = chartMAX / highestDay
var chartLinePxLength = chartLineBase * lowestDay +"px"
$.each( Earnings, function( i, val ) {
var chartLineBase = chartMAX / highestDay
var chartLinePxLength = parseInt(chartLineBase * val) +"px"
$("#earnings_chart_frame").append(
"<div class=\"day\" id="+i+" data-value="+ "$"+val/100 +" style=\"width:"+chartLinePxLength+"\">" + "</div>"
);
});