Make chart hidden when balance is 0

Question

I'm working on a project which features a portfolio doughnut chart on the dashboard. Currently if you're a new user the dt-card is just an empty box. When you have balance it shows the chart

.

I want to make it that when you dont have balance it minimizes the <script> part to Make it look like this

and only shows a header saying "Your portfolio is empty.". I'll provide the current code of it right now.

<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>```