i have a chart but nothing show:
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>QTTrade</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
        <link href="css/main.css" rel="stylesheet">
        <script src="js/axios.min.js"></script>
        <script src="js/vue.global.js"></script>
        <script src="js/vue.global.prod.js"></script>
        <script src="js/chart.js"></script>
        <script src="js/chartPlugin.js"></script>
        <link href="css/fontawesome.css" rel="stylesheet">
    </head>
    <body id="IndexUIDiv">
        <!--NAVBAR-->
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-fluid">
              <a class="navbar-brand" href="index.html">QTTarde</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <li class="nav-item">
                        <a class="nav-link link-header me-2" aria-current="page" href="index.html"><i class="fa-regular fa-house me-2"></i><span>Home</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link link-header me-2" aria-current="page" href="inProgress.html"><i class="fa-regular fa-spinner me-2"></i>In Progress</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link link-header me-2" aria-current="page" href="closed.html"><i class="fa-regular fa-lock me-2"></i>Closed</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link link-header me-2" aria-current="page" href="about.html"><i class="fa-regular fa-address-card me-2"></i><span>About Us</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link link-header me-2" aria-current="page" href="statement.html"><i class="fa-regular fa-chart-simple me-2"></i><span>Statement</span></a>
                    </li>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        <!--END NAVBAR-->

        <div class="container-fluid">
        
            <!-- INTRODUCE -->
            <div class="mt-5">
                <div class="row d-flex align-items-center justify-content-around">
                    <div class="col-xg-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 text-center">
                        <img src="img/chart.png" class="img-fluid ease-up-down">
                    </div>
                    <div class="col-xg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 text-left" style="text-align: justify;">
                        <h1 class="fw-bold">What is Statement of Trading?</h1>
                        <p>Welcome to the Statement of Trading page, where transparency meets performance. Here, you’ll find a comprehensive record of our trading history, showcasing the effectiveness and reliability of our trading signals. </p>
                        <p>With detailed insights into past trades, including profit and loss summaries, win rates, and strategic approaches, this page is designed to provide you with the confidence and assurance you need when using our services. </p>
                        <p>Explore our performance metrics and see firsthand our commitment to delivering consistent and successful trading strategies. Your trust is our priority, and we’re here to empower you with the information you need to make informed decisions.</p>
                        <p><i class="fa-regular fa-envelope me-2"></i>Email : <a href="mailto:info@qttrade.xyz" class="text-decoration-none fw-bold text-light">info@qttrade.xyz</a></p>
                    </div>
                </div>
            </div>

            <!-- END INTRODUCE -->
            <canvas id="canvas">
            <!--SUBSCRIPTION-->
            <div class="mt-5">
                <div class="p-3 row d-flex align-items-center justify-content-around bg-secondary text-center">
                    <h3>Join Our Newsletter</h3>
                    <p>Stay ahead of the market with our exclusive trade signals, delivered straight to your inbox!</p>
                    <div class="mb-3 row d-flex justify-content-center">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-2">
                            <input type="email" class="form-control" placeholder="example@gmail.com" v-model="UserEmail">
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <button type="submit" class="btn btn-primary w-100" v-on:click="AddSubcription">Confirm</button>
                        </div>
                    </div>
                    <div v-if="AddSubscriptionStatus == 1" class="mb-3 row text-center">
                        <p class="bg-success fw-bold">You Added successfully.</p>
                    </div>
                    <div v-if="AddSubscriptionStatus == 2" class="mb-3 row text-center">
                        <p class="bg-danger fw-bold">Somthing went wrong. Please try again later.</p>
                    </div>
                    <div v-if="AddSubscriptionStatus == 3" class="mb-3 row text-center">
                        <p class="bg-danger fw-bold">Please insert an email address in correct format.</p>
                    </div>
                </div>
            </div>
            <!--END SUBSCRIPTION-->
            
            <!--FOOTER-->
            <div class="mt-5">
                <div class="p-3 row d-flex align-items-center justify-content-between">
                    <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 col-xs-12">
                        <h3>QTTarde</h3>
                        <p>Explore our comprehensive trading resources and expert insights. Join us to enhance your trading skills, access timely market analysis, and achieve your financial goals with confidence</p>
                    </div>
                    <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 col-xs-12col-xl-5 col-lg-5 col-md-5 col-sm-12 col-xs-12">
                        <h5>Usefull Links</h5>
                        <p><a class="footer-link link-header me-2" href="index.html"><i class="fa-regular fa-house me-2"></i><span>Home</span></a></p>
                        <p><a class="footer-link link-header me-2" href="inProgress.html"><i class="fa-regular fa-spinner me-2"></i>In Progress</span></a></p>
                        <p><a class="footer-link link-header me-2" href="closed.html"><i class="fa-regular fa-lock me-2"></i>Closed</span></a></p>
                        <p><a class="footer-link link-header me-2" href="about.html"><i class="fa-regular fa-address-card me-2"></i><span>About Us</span></a></p>
                        <p><a class="footer-link link-header me-2" href="statement.html"><i class="fa-regular fa-chart-simple me-2"></i><span>Statement</span></a></p>
                    </div>
                </div>
            </div>
            <div class="row text-center">
                <p>Developed by Qasem Talaee with <span class="text-danger fs-3">&#9829;</span></p>
            </div>
            <!--END FOOTER-->
        </div>
    </body>
</html>


<script>
    const IndexUI = {
        data() {
            return {
                UserEmail: '',
                Statement:{},
            }
        },
        mounted() {
            this.GetStatement();
            const ctx = document.getElementById("canvas");
			this.myChart = new Chart(ctx);
        },
        methods: {
            GetStatement(){
                axios.get("api/ClientServices/statement.php").
                        then(res => {
                            this.Statement = res.data;
                            this.CreateChart('bar');
                            console.log(this.Statement)
                        });
            },//----
            CreateChart(type) {
				this.myChart.destroy();
				const ctx = document.getElementById("canvas");
				this.myChart = new Chart(ctx, {
					plugins: [ChartDataLabels],
					type: 'bar',
					data: {
						//labels: this.ResultList.map(row => row.date),
						datasets: [{  
                            label: 'Balance',  
                            data: this.Statement.balance_list, // Y-axis data points  
                            borderColor: 'rgba(75, 192, 192, 1)',  
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',  
                            borderWidth: 1  
                        }]  
					},
					
				});
			},//-----
            AddSubcription(){
                const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                if(this.UserEmail != ""){
                    if (emailRegex.test(this.UserEmail)){
                        axios.post("api/ClientServices/addSubscription.php", {"email": this.UserEmail}).
                            then(res => {
                                if(res.data == "OK"){
                                    this.AddSubscriptionStatus = 1;
                                }
                                else{
                                    this.AddSubscriptionStatus = 2;
                                }
                            });
                    }
                    else{
                        this.AddSubscriptionStatus = 3;
                    }
                }
            },//----
        },
    };
  
    VueObj = Vue.createApp(IndexUI).mount("#IndexUIDiv");
</script>