Plot the rate history data in line chart

resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue

@@ -27,10 +27,12 @@
                     <!-- <button type="button" class="btn btn-lg btn-secondary fs-11" @click="resetSarch">Reset</button> -->
                 </div>
             </div>
-            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>           
             <div class="row" v-if="!isLoading && !hasError">
                 <div class="col">
-                    <p>{{ rateHistory }}</p>
+                    <div class="col-12 mx-auto p-0 " style="width: 800px; height:350px">
+                        <canvas id="currency-history-chart"></canvas>
+                    </div>
                 </div>
             </div>
             <div class="row" v-if="hasError">
@@ -59,7 +61,7 @@
 </template>
 
 <script>
-import Chart from "chart.js";
+import Chart from 'chart.js';
 
 export default {
     data() {
@@ -80,6 +82,8 @@ export default {
                 date_to: null,
                 date_from: null,
             },
+            chartLebels:[],
+            chartData: []
         };
     },
     computed: {
@@ -135,6 +139,30 @@ export default {
             this.hasError = true;
             // this.error = error.message;
         }
-    }
+    },
+    watch: {
+        rateHistory: function(newVal) {
+                for (var i = 0; i < newVal.length; i++) {
+                    this.chartLebels.push(newVal[i].created_at.split("-")[0]);
+                    this.chartData.push(newVal[i]["rate"]);
+                }
+                setTimeout(() => {
+                    const ctx = document.getElementById("currency-history-chart");
+                    new Chart(ctx, {
+                        type: 'line',
+                        data: {
+                            labels: this.chartLebels,
+                            datasets: [{
+                                label: 'Currency Rate History',
+                                data: this.chartData,
+                                fill: false,
+                                borderColor: 'rgb(75, 192, 192)',
+                                tension: 0.1
+                            }]
+                        },
+                    });
+                }, 300);
+            }
+        },
 }
 </script>