Grafico de barras <table> width td

estou fazendo um grafico de barras porem por alguma incompatibilidade ou algo do tipo nao consigo usar nenhuma lib de graficos, tentei o chart.js, o google chats entre uns outros 10 kkk e não posso alterar isso kkk só tenho permissão de implantar, mas sem alterar nada, dai desenvolvi um “arranjo” com table e to com problemas pra estilizar, alguem pode me ajudar?

<div id='sl' style='border:1px solid #EDEDED;width: 500px;height:300px;position: relative;left:120px; top:20px'>
            <span style="padding:0;margin:0 auto;text-align: center;width:100%;">Porcentagem de avaliações</span>
            <table id="chart" style="border-collapse: collapse;"></table>
        </div>
        <script>
            var data = <?php echo json_encode($grbar) ?>;
            function details(column){
                var coluna = column.split("-");
                var linha = data[coluna[1]]['porcent'];
                $("#ch"+coluna[1]).append("<span class='porc' style='position:absolute;top:30px;min-width:60px; left:25%;border-radius:5px;background:#333;padding:5px 10px;margin:0 auto;fot-size:25px;z-index:9999;position: absolute;color:#ededed; text-align:center;'>"+data[coluna[1]]['porcent']+"%</span>");
            }
            
            function limp(column){
                var coluna = column.split("-");
                var linha = data[coluna[1]]['porcent'];
                $(".porc").remove();
            }
            var wid = 100 / <?php echo count($grbar) ?>;
            var qtc = (<?php echo count($grbar) ?>*2);
            for (var i = 100; i >= 0; i--) {
                var cols = "";
                for (var x = 0; x <<?php echo count($grbar) ?>; x++) {
                    cols += '<td onmouseOver="details(\'ch-' + x + '\')" onmouseout="limp(\'ch-' + x + '\')" style="margin:0 10px !important;widht:'+wid+'%;position:relative;" class="cel" id="ch' + x + '"></td>';
                }
                $("#chart").append('<tr id="line' + i + '">' + cols + '</tr>');
            }
            $("#chart").append("<tr><?php for ($x = 0; $x < count($grbar); $x++) {
            echo "<td style='transform:rotate(-45deg); widht:100px;'>" . $grbar[$x]['avaliacao'] . "</td>";
        } ?></tr>");
            $("#chart").css({"width": "100%", "height": "100%", "position": "absolute", "top": "20px"});
            const cor = ["red", "blue", "green", "orange", "black", "yellow"];
            
            console.log(data);
            for (var j = 0; j <<?php echo count($grbar) ?>; j++) {
                for (var i = 0; i <= data[j]['porcent']; i++) {
                    for (var x = 0; x <<?php echo count($grbar) ?>; x++) {
                        if (data[x]['porcent'] != 0) {
                            $("#line" + i + " #ch" + x).css("background", cor[x]);
                        }
                    }
                }
            }
        </script>

ta mais ou menos como deve ser, mas não consigo alterar espaço entre as tds

O que significa “implantar sem alterar nada”? Por que não conseguiu usar libs já prontas?

É um bocado de código, e é meio complicado pra ler. Pode postar uma imagem do resultado que está tendo e o resultado que espera (uma imagem editada)?

Se não pode usar divs, considerou usar canvas e desenhar as barras (usado js)? Acredito ser mais simples que tentar simular isso com table. Outra opção é usar divs, controlando a altura delas e fixando no na parte de baixo de uma div maior, ou usando posições absolutas.

Abraço.