improve stock price history chart

src/components/StockPriceHistory.svelte

@@ -3,8 +3,9 @@
 	import { Chart, registerables } from 'chart.js';
 	import { getRequest } from '../utils/api.js';
 	import { fade } from 'svelte/transition';
+	import ChartDataLabels from 'chartjs-plugin-datalabels';
 
-	Chart.register(...registerables);
+	Chart.register(...registerables, ChartDataLabels);
 
 	export let code;
 
@@ -12,6 +13,8 @@
 	let chartInstance;
 	let selectedRange = '5d';
 	let isLoading = true;
+	let currentPrice = null;
+	let currentCurrency = '';
 
 	const ranges = ['5d', '30d', '6m', '1y'];
 
@@ -78,6 +81,15 @@
 				plugins: {
 					legend: {
 						display: false
+					},
+					datalabels: {
+						color: '#fff',
+						anchor: 'end',
+						align: 'top',
+						font: {
+							weight: 'bold'
+						},
+						formatter: (value) => value.toFixed(2)
 					}
 				}
 			}
@@ -86,8 +98,14 @@
 
 	async function updateChart(range) {
 		selectedRange = range;
+		isLoading = true;
+
 		const history = await fetchData(range);
+		isLoading = false;
+
 		if (history.length > 0) {
+			currentPrice = history[history.length - 1].price;
+			currentCurrency = history[history.length - 1].currency || '';
 			renderChart(history);
 		}
 	}
@@ -112,7 +130,14 @@
 	</div>
 {:else}
 	<div class="w-full mt-10 max-w-6xl mx-auto bg-white dark:bg-gray-900 p-6 rounded-xl shadow-md">
-		<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Price History</h3>
+		<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">
+			Price History
+			{#if currentPrice !== null}
+		<span class="ml-2 text-blue-500 dark:text-blue-300 text-lg font-medium">
+			({currentCurrency} {currentPrice.toFixed(2)})
+		</span>
+			{/if}
+		</h3>
 		<canvas bind:this={chartCanvas}></canvas>
 
 		<div class="flex justify-center gap-4 mt-6">