JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<ul class="chartData">
    <li>58</li>
    <li>18</li>
    <li>32</li>
    <li>44</li>
    <li>96</li>
    <li>13</li>
    <li>29</li>
    <li>73</li>
    <li>5</li>
</ul>
<div id="canvasArea"></div>

CSS

:root {padding: 25px}
.chartData {display: none}
#canvasArea {position: relative}
.column {position: absolute; background-color: #8f8; width: 15px; bottom: 0px; left: 0px; height: 0px}

JavaScript

$(function() {

    canvasHeight = 160;
    canvasDrawHeight = 150;
    canvasWidth = 400;
    canvasBG = "#aaa";
    canvasLeftMargin = 30;
    
    columnStep = '30';
    
    var colHeight = 0;
    var maxColumn = 0;

    $("#canvasArea").css('width', canvasWidth + 'px')
        .css('height', canvasHeight + 'px')
        .css('background-color', canvasBG);
    
    $(".chartData").find("li").each(function(){   
        if (maxColumn < $(this).html()) {maxColumn = $(this).html() }  
    });

    $(".chartData").find("li").each(function(index) {
        
        colHeight = Math.round($(this).html() * canvasDrawHeight / maxColumn);
        leftX = canvasLeftMargin + index * columnStep;

        $("#canvasArea").append("<div class='column' id='col"+index+"' style='left: "+leftX+"px'></div>");

        $("#canvasArea div.column:last").animate({height: colHeight}, 500)

    });

})