JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="chartData">
    <li>1228</li>
    <li>1354</li>
    <li>1296</li>
    <li>1428</li>
    <li>1348</li>
    <li>1351</li>
    <li>1325</li>
    <li>1336</li>
    <li>1339</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;             // Хамгийн өндөр баганыг хадгалах хувьсагч
    var minColumn = 0;             // Хамгийн бага баганыг хадгалах хувьсагч

    $("#canvasArea").css('width', canvasWidth + 'px')   // Канвасын зайг үүсгэх будах
        .css('height', canvasHeight + 'px')             // Энэ хэсгийг SVG эсвэл getContext('2d') хий
        .css('background-color', canvasBG);
    
    // max өндөрийг олох. 
    // заавал давталт гүйлгэлгүйгээр Math.Max(элемэнтүүд) гэж хийж болно. Алдаа гараад байхлаар нь залхуурав.
    $(".chartData").find("li").each(function(){   
        if (maxColumn < parseInt($(this).html(), 0)) {maxColumn = $(this).html(); }  // maxColumn -д max утгийг олох
    });
    
    console.log(maxColumn);                                         

    $(".chartData").find("li").each(function(index) {
        
        // Тухайн баганы өндөрийг канвасын өндөр, max баганы өндөрөөс хамааран тооцох
        colHeight = Math.round($(this).html() * canvasDrawHeight / maxColumn);
        
        // Тухайн баганыг хэд дэхь багана болхоос нь хамааран зүүн талын зайг тооцох
        // Ингэж хийлгүйгээр баганаа float: left, margin-left: columnStep, гэж хийж болно.
        leftX = canvasLeftMargin + index * columnStep;
        
        // Баганаа канвас руу нэмэх
        $("#canvasArea").append("<div class='column' style='left: "+leftX+"px'></div>");
        
        // Сүүлд зурагдсан баганы өндөрт animation хийж дүрслэх
       ...