Estoy trabajando en un proyecto que presenta un gráfico de anillos de cartera en el tablero. Actualmente, si es un usuario nuevo, la tarjeta dt es solo un cuadro vacío. Cuando tienes saldo te muestra el gráfico

.

Quiero hacer que cuando no tengas saldo minimice la parte <script> para que se vea así

y solo muestra un encabezado que dice "Tu cartera está vacía". Proporcionaré el código actual ahora mismo.

 <div class="col-md-12"> <!-- Card --> <div class="dt-card dt-card__full-height"> <!-- Card Header --> <div class="dt-card__header"> <!-- Card Heading --> <div class="dt-card__heading"> <h3 class="dt-card__title"> <?php echo ("Your Portfolio") ?> </h3> </div> <!-- /card heading --> </div> <!-- /card header --> <!-- Card Body --> <div class="dt-card__body d-flex justify-content-center align-items-center"> <!-- Chart --> <canvas id="pie-chart" class="m--30p display-b" data-fill="27" height="130" width="130"></canvas> <!-- /chart --> </div> <!-- /card body --> </div> <script src="<?php echo base_url('/assets/dist/js/Chart.min.js') ?>"></script> <script> var activedeposits = <?php echo $activeDeposits > 0 ? $activeDeposits : '0' ?>; var withdrawals = <?php echo $earningsInfo > 0 ? $earningsInfo : '0' ?>; new Chart(document.getElementById("pie-chart"), { type: 'doughnut', data: { labels: ["Deposited", "Earnings"], datasets: [{ label: "Transactions", backgroundColor: ["#0862c9", "#71A5E1"], data: [activedeposits, withdrawals] }] } }); </script> <!-- /card --> </div>```