more beautiful chart

src/main.ts

@@ -11,8 +11,8 @@ import axios from 'axios';
 import { AxiosResponse } from "axios";
 import { createYmaps } from 'vue-yandex-maps';
 
-const HOST = "https://cycle-rider.ru";
-// const HOST = "http://localhost:8000";
+// const HOST = "https://cycle-rider.ru";
+const HOST = "http://localhost:8000";
 
 axios.defaults.baseURL = HOST;
 

src/pages/workouts/WorkoutItem.vue

@@ -26,7 +26,8 @@
         }"
     />
     </yandex-map>
-    <LineWithLineChart id="my-chart-id" :options="chartOptions"  :data="data" />
+    <!-- @vue-ignore -->
+    <LineWithLineChart id="my-chart-id" :options="chartOptions"  :data="data" />  
 </template>
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
@@ -131,17 +132,40 @@ const chartOptions ={
         }   
     },
     plugins: {
-      zoom: {
+        tooltip: {
+            enabled: true,
+            intersect: false,
+            footerMarginTop: 10,
+            displayColors: false,
+            callbacks: {
+                    label: function(context: any) {
+                        let label = context.dataset.label || '';
+
+                        if (label) {
+                            label += ': ';
+                        }
+                        if (context.parsed.x !== null) {
+                            console.log(typeof context)
+                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
+                        }
+                        return ["Скорость: " + data.value.datasets[0].data[context.dataIndex], 
+                                "Пульс: " + data.value.datasets[1].data[context.dataIndex],
+                                "Мощность: " + data.value.datasets[2].data[context.dataIndex],
+                                ];
+                    }
+                }
+        },
         zoom: {
-            drag: {
-                enabled: true,
-            },
-            pinch: {
-                enabled: true
-            },
-            mode: 'x',
+            zoom: {
+                drag: {
+                    enabled: true,
+                },
+                pinch: {
+                    enabled: true
+                },
+                mode: 'x',
+            }
         }
-      }
     }
 }
 const msToKmh = (ms: number) => ms * 3.6;