From d0860317f7cd2a5d99b471fe51f3fcecb43a6e84 Mon Sep 17 00:00:00 2001
From: Vlad Keliy <vekkele@gmail.com>
Date: Wed, 26 Aug 2026 12:38:16 +0300
Subject: [PATCH] feat(chart) Add text label option to the series

---
 src/lib/ctx/metrics-registry/types/index.ts   |  1 +
 src/lib/ui/app/Chart/ctx/series.svelte.ts     |  5 ++++
 src/lib/ui/app/Chart/series/RawSeries.svelte  | 10 +++++--
 .../Chart/index.stories.ts                    | 27 +++++++++++++++++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/lib/ctx/metrics-registry/types/index.ts b/src/lib/ctx/metrics-registry/types/index.ts
index d0599ee79..e51ae470e 100644
--- a/src/lib/ctx/metrics-registry/types/index.ts
+++ b/src/lib/ctx/metrics-registry/types/index.ts
@@ -89,6 +89,7 @@ export type TChartMetricBase<GMetricType extends TMetricTypes, GData extends obj
 
   data?: TMetricData
   label?: string
+  title?: string
   style?: TMetricStyles
   lineStyle?: LineStyle
   color?: string
diff --git a/src/lib/ui/app/Chart/ctx/series.svelte.ts b/src/lib/ui/app/Chart/ctx/series.svelte.ts
index 8943eae3c..9e4c10bc9 100644
--- a/src/lib/ui/app/Chart/ctx/series.svelte.ts
+++ b/src/lib/ui/app/Chart/ctx/series.svelte.ts
@@ -80,6 +80,7 @@ type TBaseSeries<GType extends TMetricTypes> = {
   ui: {
     get $$(): {
       color: string
+      title: string
       style: NonNullable<TChartMetric['style']>
       lineStyle: LineStyle
       lastValueVisible: boolean
@@ -116,6 +117,7 @@ type TBaseSeries<GType extends TMetricTypes> = {
 
     visible?: boolean
     color: string
+    title?: string
     style: TMetricStyles
     lineStyle: LineStyle
     lastValueVisible?: boolean
@@ -181,6 +183,7 @@ export function createSeries(
     apiMetricName = '',
 
     label = apiMetricName,
+    title = '',
     data = [],
 
     // getLabels$ = DEFAULT_LABELS_GETTER,
@@ -234,6 +237,7 @@ export function createSeries(
 
   const ui = $state({
     color,
+    title,
     style,
     lineStyle,
     lastValueVisible,
@@ -372,6 +376,7 @@ export function createSeries(
         // default true -> undefined (omit from API)
         priceLineVisible: metric.ui.$$.priceLineVisible && undefined,
         color: metric.ui.$$.color,
+        title: metric.ui.$$.title || undefined,
         style: metric.ui.$$.style,
         lineStyle: metric.ui.$$.lineStyle,
         unit: metric.ui.$$.unit,
diff --git a/src/lib/ui/app/Chart/series/RawSeries.svelte b/src/lib/ui/app/Chart/series/RawSeries.svelte
index 72da3c99d..a8798e5f7 100644
--- a/src/lib/ui/app/Chart/series/RawSeries.svelte
+++ b/src/lib/ui/app/Chart/series/RawSeries.svelte
@@ -77,8 +77,13 @@
   })
 
   $effect.pre(() => {
-    const { color, style, lineStyle, lastValueVisible, priceLineVisible } = ui.$$
-    const options = { color, lastValueVisible, priceLineVisible }
+    const { color, title, style, lineStyle, lastValueVisible, priceLineVisible } = ui.$$
+    const options = {
+      color,
+      title,
+      lastValueVisible,
+      priceLineVisible,
+    }
 
     if (style === MetricStyle.AREA) {
       Object.assign(options, getAreaSeriesColors(series), { lineStyle })
@@ -142,6 +147,7 @@
     const base = {
       zOrder: 10,
       priceFormat: untrack(() => priceFormat),
+      title: ui.$$.title,
       lastValueVisible: ui.$$.lastValueVisible,
       priceLineVisible: ui.$$.priceLineVisible,
     }
diff --git a/src/stories/Design System - App UI/Chart/index.stories.ts b/src/stories/Design System - App UI/Chart/index.stories.ts
index ffec337e0..9385f944e 100644
--- a/src/stories/Design System - App UI/Chart/index.stories.ts	
+++ b/src/stories/Design System - App UI/Chart/index.stories.ts	
@@ -593,3 +593,30 @@ export const LineStyleMetrics: Story = {
     ],
   },
 }
+
+export const FixedLineWithText: Story = {
+  args: {
+    defaultMetrics: [
+      {
+        apiMetricName: 'price_usd',
+        label: 'Default Line (btc)',
+        style: 'line',
+      },
+      {
+        type: MetricType.DATA_STORE,
+        title: 'Label text',
+        color: '#5275FF',
+        style: 'line',
+        lineStyle: LineStyle.Dashed,
+        lastValueVisible: false,
+        priceLineVisible: false,
+        scaleId: 'right',
+        scaleMargins: { top: 0.1, bottom: 0 },
+        data: [
+          { time: 0, value: 20_000 },
+          { time: Date.now() / 1000, value: 20_000 },
+        ],
+      },
+    ],
+  },
+}