From fd7c7e9b519443b2fac6cd9d73ae0e9145d437c9 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 17 Apr 2024 18:30:49 +0300
Subject: [PATCH] UI: Improve time series chart tooltip configuration - added
 font/color settings for tooltip label.

---
 ...art-with-labels-basic-config.component.html | 15 +++++++++++++++
 ...chart-with-labels-basic-config.component.ts |  8 ++++++++
 .../range-chart-basic-config.component.html    | 18 ++++++++++++++++--
 .../range-chart-basic-config.component.ts      |  8 ++++++++
 ...me-series-chart-basic-config.component.html | 15 +++++++++++++++
 ...time-series-chart-basic-config.component.ts |  9 +++++++++
 .../bar-chart-with-labels-widget.models.ts     | 11 +++++++++++
 .../widget/lib/chart/echarts-widget.models.ts  | 15 ++++++++-------
 .../lib/chart/range-chart-widget.models.ts     | 11 +++++++++++
 .../lib/chart/time-series-chart.models.ts      |  9 +++++++++
 ...-with-labels-widget-settings.component.html | 15 +++++++++++++++
 ...rt-with-labels-widget-settings.component.ts |  6 ++++++
 .../range-chart-widget-settings.component.html | 15 +++++++++++++++
 .../range-chart-widget-settings.component.ts   |  6 ++++++
 ...series-chart-widget-settings.component.html | 15 +++++++++++++++
 ...e-series-chart-widget-settings.component.ts |  7 +++++++
 .../assets/locale/locale.constant-en_US.json   |  1 +
 17 files changed, 175 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
index fa0932175c..6f263f05d3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
@@ -239,10 +239,24 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
+        <div class="tb-form-row space-between">
+          <div>{{ 'tooltip.label' | translate }}</div>
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <tb-font-settings formControlName="tooltipLabelFont"
+                              [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipLabelColor').value }"
+                              previewText="Temperature">
+            </tb-font-settings>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="tooltipLabelColor">
+            </tb-color-input>
+          </div>
+        </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
           <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
             <tb-font-settings formControlName="tooltipValueFont"
+                              [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
             </tb-font-settings>
             <tb-color-input asBoxInput
@@ -259,6 +273,7 @@
             <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
+                              [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipDateColor').value }"
                               [previewText]="tooltipDatePreviewFn">
             </tb-font-settings>
             <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
index 49c98aa0aa..5c616fa028 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
@@ -139,6 +139,8 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
       legendLabelColor: [settings.legendLabelColor, []],
 
       showTooltip: [settings.showTooltip, []],
+      tooltipLabelFont: [settings.tooltipLabelFont, []],
+      tooltipLabelColor: [settings.tooltipLabelColor, []],
       tooltipValueFont: [settings.tooltipValueFont, []],
       tooltipValueColor: [settings.tooltipValueColor, []],
       tooltipShowDate: [settings.tooltipShowDate, []],
@@ -210,6 +212,8 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
     this.widgetConfig.config.settings.legendLabelColor = config.legendLabelColor;
 
     this.widgetConfig.config.settings.showTooltip = config.showTooltip;
+    this.widgetConfig.config.settings.tooltipLabelFont = config.tooltipLabelFont;
+    this.widgetConfig.config.settings.tooltipLabelColor = config.tooltipLabelColor;
     this.widgetConfig.config.settings.tooltipValueFont = config.tooltipValueFont;
     this.widgetConfig.config.settings.tooltipValueColor = config.tooltipValueColor;
     this.widgetConfig.config.settings.tooltipShowDate = config.tooltipShowDate;
@@ -302,6 +306,8 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
     }
 
     if (showTooltip) {
+      this.barChartWidgetConfigForm.get('tooltipLabelFont').enable();
+      this.barChartWidgetConfigForm.get('tooltipLabelColor').enable();
       this.barChartWidgetConfigForm.get('tooltipValueFont').enable();
       this.barChartWidgetConfigForm.get('tooltipValueColor').enable();
       this.barChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false});
@@ -319,6 +325,8 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
         this.barChartWidgetConfigForm.get('tooltipDateInterval').disable();
       }
     } else {
+      this.barChartWidgetConfigForm.get('tooltipLabelFont').disable();
+      this.barChartWidgetConfigForm.get('tooltipLabelColor').disable();
       this.barChartWidgetConfigForm.get('tooltipValueFont').disable();
       this.barChartWidgetConfigForm.get('tooltipValueColor').disable();
       this.barChartWidgetConfigForm.get('tooltipShowDate').disable({emitEvent: false});
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
index 4045d1d928..e087ce7d91 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
@@ -301,10 +301,24 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
+        <div class="tb-form-row space-between">
+          <div>{{ 'tooltip.label' | translate }}</div>
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <tb-font-settings formControlName="tooltipLabelFont"
+                              [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipLabelColor').value }"
+                              previewText="Temperature">
+            </tb-font-settings>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="tooltipLabelColor">
+            </tb-color-input>
+          </div>
+        </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
           <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
             <tb-font-settings formControlName="tooltipValueFont"
+                              [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
             </tb-font-settings>
             <tb-color-input asBoxInput
@@ -312,8 +326,7 @@
                             formControlName="tooltipValueColor">
             </tb-color-input>
           </div>
-        </div>
-        <div class="tb-form-row column-xs">
+        </div>        <div class="tb-form-row column-xs">
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
@@ -321,6 +334,7 @@
             <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
+                              [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipDateColor').value }"
                               [previewText]="tooltipDatePreviewFn">
             </tb-font-settings>
             <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
index 9c39ef8f27..1144f0b905 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
@@ -175,6 +175,8 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
       legendLabelColor: [settings.legendLabelColor, []],
 
       showTooltip: [settings.showTooltip, []],
+      tooltipLabelFont: [settings.tooltipLabelFont, []],
+      tooltipLabelColor: [settings.tooltipLabelColor, []],
       tooltipValueFont: [settings.tooltipValueFont, []],
       tooltipValueColor: [settings.tooltipValueColor, []],
       tooltipShowDate: [settings.tooltipShowDate, []],
@@ -257,6 +259,8 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
     this.widgetConfig.config.settings.legendLabelColor = config.legendLabelColor;
 
     this.widgetConfig.config.settings.showTooltip = config.showTooltip;
+    this.widgetConfig.config.settings.tooltipLabelFont = config.tooltipLabelFont;
+    this.widgetConfig.config.settings.tooltipLabelColor = config.tooltipLabelColor;
     this.widgetConfig.config.settings.tooltipValueFont = config.tooltipValueFont;
     this.widgetConfig.config.settings.tooltipValueColor = config.tooltipValueColor;
     this.widgetConfig.config.settings.tooltipShowDate = config.tooltipShowDate;
@@ -381,6 +385,8 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
     }
 
     if (showTooltip) {
+      this.rangeChartWidgetConfigForm.get('tooltipLabelFont').enable();
+      this.rangeChartWidgetConfigForm.get('tooltipLabelColor').enable();
       this.rangeChartWidgetConfigForm.get('tooltipValueFont').enable();
       this.rangeChartWidgetConfigForm.get('tooltipValueColor').enable();
       this.rangeChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false});
@@ -398,6 +404,8 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
         this.rangeChartWidgetConfigForm.get('tooltipDateInterval').disable();
       }
     } else {
+      this.rangeChartWidgetConfigForm.get('tooltipLabelFont').disable();
+      this.rangeChartWidgetConfigForm.get('tooltipLabelColor').disable();
       this.rangeChartWidgetConfigForm.get('tooltipValueFont').disable();
       this.rangeChartWidgetConfigForm.get('tooltipValueColor').disable();
       this.rangeChartWidgetConfigForm.get('tooltipShowDate').disable({emitEvent: false});
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
index da30c4d163..fcee2a9dba 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
@@ -261,10 +261,24 @@
                              [value]="EChartsTooltipTrigger.axis">{{ 'tooltip.trigger-axis' | translate }}</mat-chip-option>
           </mat-chip-listbox>
         </div>
+        <div class="tb-form-row space-between">
+          <div>{{ 'tooltip.label' | translate }}</div>
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <tb-font-settings formControlName="tooltipLabelFont"
+                              [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipLabelColor').value }"
+                              previewText="Temperature">
+            </tb-font-settings>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="tooltipLabelColor">
+            </tb-color-input>
+          </div>
+        </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
           <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
             <tb-font-settings formControlName="tooltipValueFont"
+                              [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
             </tb-font-settings>
             <tb-color-input asBoxInput
@@ -281,6 +295,7 @@
             <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
+                              [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipDateColor').value }"
                               [previewText]="tooltipDatePreviewFn">
             </tb-font-settings>
             <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
index 305b22d11f..f32f35d47e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
@@ -178,6 +178,8 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
 
       showTooltip: [settings.showTooltip, []],
       tooltipTrigger: [settings.tooltipTrigger, []],
+      tooltipLabelFont: [settings.tooltipLabelFont, []],
+      tooltipLabelColor: [settings.tooltipLabelColor, []],
       tooltipValueFont: [settings.tooltipValueFont, []],
       tooltipValueColor: [settings.tooltipValueColor, []],
       tooltipShowDate: [settings.tooltipShowDate, []],
@@ -250,6 +252,8 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
 
     this.widgetConfig.config.settings.showTooltip = config.showTooltip;
     this.widgetConfig.config.settings.tooltipTrigger = config.tooltipTrigger;
+    this.widgetConfig.config.settings.tooltipLabelFont = config.tooltipLabelFont;
+    this.widgetConfig.config.settings.tooltipLabelColor = config.tooltipLabelColor;
     this.widgetConfig.config.settings.tooltipValueFont = config.tooltipValueFont;
     this.widgetConfig.config.settings.tooltipValueColor = config.tooltipValueColor;
     this.widgetConfig.config.settings.tooltipShowDate = config.tooltipShowDate;
@@ -345,6 +349,8 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
 
     if (showTooltip) {
       this.timeSeriesChartWidgetConfigForm.get('tooltipTrigger').enable();
+      this.timeSeriesChartWidgetConfigForm.get('tooltipLabelFont').enable();
+      this.timeSeriesChartWidgetConfigForm.get('tooltipLabelColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueFont').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false});
@@ -362,6 +368,9 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
         this.timeSeriesChartWidgetConfigForm.get('tooltipDateInterval').disable();
       }
     } else {
+      this.timeSeriesChartWidgetConfigForm.get('tooltipTrigger').disable();
+      this.timeSeriesChartWidgetConfigForm.get('tooltipLabelFont').disable();
+      this.timeSeriesChartWidgetConfigForm.get('tooltipLabelColor').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueFont').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').disable({emitEvent: false});
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts
index 53e4dc8527..3b6333bbc3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts
@@ -131,6 +131,15 @@ export const barChartWithLabelsDefaultSettings: BarChartWithLabelsWidgetSettings
   },
   legendLabelColor: 'rgba(0, 0, 0, 0.76)',
   showTooltip: true,
+  tooltipLabelFont: {
+    family: 'Roboto',
+    size: 12,
+    sizeUnit: 'px',
+    style: 'normal',
+    weight: '400',
+    lineHeight: '16px'
+  },
+  tooltipLabelColor: 'rgba(0, 0, 0, 0.76)',
   tooltipValueFont: {
     family: 'Roboto',
     size: 12,
@@ -181,6 +190,8 @@ export const barChartWithLabelsTimeSeriesSettings = (settings: BarChartWithLabel
   animation: settings.animation,
   thresholds: settings.thresholds,
   showTooltip: settings.showTooltip,
+  tooltipLabelFont: settings.tooltipLabelFont,
+  tooltipLabelColor: settings.tooltipLabelColor,
   tooltipValueFont: settings.tooltipValueFont,
   tooltipValueColor: settings.tooltipValueColor,
   tooltipShowDate: settings.tooltipShowDate,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts
index 8fc248502e..4d188e0a74 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts
@@ -447,6 +447,8 @@ export interface EChartsTooltipWidgetSettings {
   showTooltip: boolean;
   tooltipTrigger?: EChartsTooltipTrigger;
   tooltipShowFocusedSeries?: boolean;
+  tooltipLabelFont: Font;
+  tooltipLabelColor: string;
   tooltipValueFont: Font;
   tooltipValueColor: string;
   tooltipValueFormatter?: string | EChartsTooltipValueFormatFunction;
@@ -631,13 +633,12 @@ const constructEchartsTooltipSeriesElement = (renderer: Renderer2,
   renderer.appendChild(labelElement, circleElement);
   const labelTextElement: HTMLElement = renderer.createElement('div');
   renderer.appendChild(labelTextElement, renderer.createText(item.param.seriesName));
-  renderer.setStyle(labelTextElement, 'font-family', 'Roboto');
-  renderer.setStyle(labelTextElement, 'font-size', '12px');
-  renderer.setStyle(labelTextElement, 'font-style', 'normal');
-  renderer.setStyle(labelTextElement, 'font-weight', '400');
-  renderer.setStyle(labelTextElement, 'line-height', '16px');
-  renderer.setStyle(labelTextElement, 'letter-spacing', '0.4px');
-  renderer.setStyle(labelTextElement, 'color', 'rgba(0, 0, 0, 0.76)');
+  renderer.setStyle(labelTextElement, 'font-family', settings.tooltipLabelFont.family);
+  renderer.setStyle(labelTextElement, 'font-size', settings.tooltipLabelFont.size + settings.tooltipLabelFont.sizeUnit);
+  renderer.setStyle(labelTextElement, 'font-style', settings.tooltipLabelFont.style);
+  renderer.setStyle(labelTextElement, 'font-weight', settings.tooltipLabelFont.weight);
+  renderer.setStyle(labelTextElement, 'line-height', settings.tooltipLabelFont.lineHeight);
+  renderer.setStyle(labelTextElement, 'color', settings.tooltipLabelColor);
   renderer.appendChild(labelElement, labelTextElement);
   const valueElement: HTMLElement = renderer.createElement('div');
   let formatFunction = valueFormatFunction;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
index aa9c290231..c1221536ee 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
@@ -165,6 +165,15 @@ export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
   },
   legendLabelColor: 'rgba(0, 0, 0, 0.76)',
   showTooltip: true,
+  tooltipLabelFont: {
+    family: 'Roboto',
+    size: 12,
+    sizeUnit: 'px',
+    style: 'normal',
+    weight: '400',
+    lineHeight: '16px'
+  },
+  tooltipLabelColor: 'rgba(0, 0, 0, 0.76)',
   tooltipValueFont: {
     family: 'Roboto',
     size: 12,
@@ -233,6 +242,8 @@ export const rangeChartTimeSeriesSettings = (settings: RangeChartWidgetSettings,
       pieces: rangeItems.map(item => item.piece)
     },
     showTooltip: settings.showTooltip,
+    tooltipLabelFont: settings.tooltipLabelFont,
+    tooltipLabelColor: settings.tooltipLabelColor,
     tooltipValueFont: settings.tooltipValueFont,
     tooltipValueColor: settings.tooltipValueColor,
     tooltipShowDate: settings.tooltipShowDate,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
index bfe65a0d7c..4fdc8063aa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
@@ -752,6 +752,15 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = {
     timeSeriesChartNoAggregationBarWidthDefaultSettings),
   showTooltip: true,
   tooltipTrigger: EChartsTooltipTrigger.axis,
+  tooltipLabelFont: {
+    family: 'Roboto',
+    size: 12,
+    sizeUnit: 'px',
+    style: 'normal',
+    weight: '400',
+    lineHeight: '16px'
+  },
+  tooltipLabelColor: 'rgba(0, 0, 0, 0.76)',
   tooltipValueFont: {
     family: 'Roboto',
     size: 12,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
index 4123df9c9f..04b2bff29c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
@@ -160,10 +160,24 @@
           </mat-panel-title>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
+          <div class="tb-form-row space-between">
+            <div>{{ 'tooltip.label' | translate }}</div>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+              <tb-font-settings formControlName="tooltipLabelFont"
+                                [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipLabelColor').value }"
+                                previewText="Temperature">
+              </tb-font-settings>
+              <tb-color-input asBoxInput
+                              colorClearButton
+                              formControlName="tooltipLabelColor">
+              </tb-color-input>
+            </div>
+          </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
             <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
               <tb-font-settings formControlName="tooltipValueFont"
+                                [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
               </tb-font-settings>
               <tb-color-input asBoxInput
@@ -180,6 +194,7 @@
               <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
+                                [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipDateColor').value }"
                                 [previewText]="tooltipDatePreviewFn">
               </tb-font-settings>
               <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts
index 3c3703642c..8172c0dde7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts
@@ -103,6 +103,8 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom
       legendLabelColor: [settings.legendLabelColor, []],
 
       showTooltip: [settings.showTooltip, []],
+      tooltipLabelFont: [settings.tooltipLabelFont, []],
+      tooltipLabelColor: [settings.tooltipLabelColor, []],
       tooltipValueFont: [settings.tooltipValueFont, []],
       tooltipValueColor: [settings.tooltipValueColor, []],
       tooltipShowDate: [settings.tooltipShowDate, []],
@@ -164,6 +166,8 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom
     }
 
     if (showTooltip) {
+      this.barChartWidgetSettingsForm.get('tooltipLabelFont').enable();
+      this.barChartWidgetSettingsForm.get('tooltipLabelColor').enable();
       this.barChartWidgetSettingsForm.get('tooltipValueFont').enable();
       this.barChartWidgetSettingsForm.get('tooltipValueColor').enable();
       this.barChartWidgetSettingsForm.get('tooltipShowDate').enable({emitEvent: false});
@@ -181,6 +185,8 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom
         this.barChartWidgetSettingsForm.get('tooltipDateInterval').disable();
       }
     } else {
+      this.barChartWidgetSettingsForm.get('tooltipLabelFont').disable();
+      this.barChartWidgetSettingsForm.get('tooltipLabelColor').disable();
       this.barChartWidgetSettingsForm.get('tooltipValueFont').disable();
       this.barChartWidgetSettingsForm.get('tooltipValueColor').disable();
       this.barChartWidgetSettingsForm.get('tooltipShowDate').disable({emitEvent: false});
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
index c5de2a86a7..63b514c68b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
@@ -236,10 +236,24 @@
           </mat-panel-title>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
+          <div class="tb-form-row space-between">
+            <div>{{ 'tooltip.label' | translate }}</div>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+              <tb-font-settings formControlName="tooltipLabelFont"
+                                [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipLabelColor').value }"
+                                previewText="Temperature">
+              </tb-font-settings>
+              <tb-color-input asBoxInput
+                              colorClearButton
+                              formControlName="tooltipLabelColor">
+              </tb-color-input>
+            </div>
+          </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
             <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
               <tb-font-settings formControlName="tooltipValueFont"
+                                [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
               </tb-font-settings>
               <tb-color-input asBoxInput
@@ -256,6 +270,7 @@
               <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
+                                [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipDateColor').value }"
                                 [previewText]="tooltipDatePreviewFn">
               </tb-font-settings>
               <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
index 7e568ca7ab..872a77d2a7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
@@ -141,6 +141,8 @@ export class RangeChartWidgetSettingsComponent extends WidgetSettingsComponent {
       legendLabelColor: [settings.legendLabelColor, []],
 
       showTooltip: [settings.showTooltip, []],
+      tooltipLabelFont: [settings.tooltipLabelFont, []],
+      tooltipLabelColor: [settings.tooltipLabelColor, []],
       tooltipValueFont: [settings.tooltipValueFont, []],
       tooltipValueColor: [settings.tooltipValueColor, []],
       tooltipShowDate: [settings.tooltipShowDate, []],
@@ -232,6 +234,8 @@ export class RangeChartWidgetSettingsComponent extends WidgetSettingsComponent {
     }
 
     if (showTooltip) {
+      this.rangeChartWidgetSettingsForm.get('tooltipLabelFont').enable();
+      this.rangeChartWidgetSettingsForm.get('tooltipLabelColor').enable();
       this.rangeChartWidgetSettingsForm.get('tooltipValueFont').enable();
       this.rangeChartWidgetSettingsForm.get('tooltipValueColor').enable();
       this.rangeChartWidgetSettingsForm.get('tooltipShowDate').enable({emitEvent: false});
@@ -249,6 +253,8 @@ export class RangeChartWidgetSettingsComponent extends WidgetSettingsComponent {
         this.rangeChartWidgetSettingsForm.get('tooltipDateInterval').disable();
       }
     } else {
+      this.rangeChartWidgetSettingsForm.get('tooltipLabelFont').disable();
+      this.rangeChartWidgetSettingsForm.get('tooltipLabelColor').disable();
       this.rangeChartWidgetSettingsForm.get('tooltipValueFont').disable();
       this.rangeChartWidgetSettingsForm.get('tooltipValueColor').disable();
       this.rangeChartWidgetSettingsForm.get('tooltipShowDate').disable({emitEvent: false});
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
index 08e59eef13..737e2e2c21 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
@@ -180,10 +180,24 @@
                                [value]="EChartsTooltipTrigger.axis">{{ 'tooltip.trigger-axis' | translate }}</mat-chip-option>
             </mat-chip-listbox>
           </div>
+          <div class="tb-form-row space-between">
+            <div>{{ 'tooltip.label' | translate }}</div>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+              <tb-font-settings formControlName="tooltipLabelFont"
+                                [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipLabelColor').value }"
+                                previewText="Temperature">
+              </tb-font-settings>
+              <tb-color-input asBoxInput
+                              colorClearButton
+                              formControlName="tooltipLabelColor">
+              </tb-color-input>
+            </div>
+          </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
             <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
               <tb-font-settings formControlName="tooltipValueFont"
+                                [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
               </tb-font-settings>
               <tb-color-input asBoxInput
@@ -207,6 +221,7 @@
               <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
+                                [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipDateColor').value }"
                                 [previewText]="tooltipDatePreviewFn">
               </tb-font-settings>
               <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
index cafa8c84b1..8ea641d299 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
@@ -143,6 +143,8 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
 
       showTooltip: [settings.showTooltip, []],
       tooltipTrigger: [settings.tooltipTrigger, []],
+      tooltipLabelFont: [settings.tooltipLabelFont, []],
+      tooltipLabelColor: [settings.tooltipLabelColor, []],
       tooltipValueFont: [settings.tooltipValueFont, []],
       tooltipValueColor: [settings.tooltipValueColor, []],
       tooltipValueFormatter: [settings.tooltipValueFormatter, []],
@@ -205,6 +207,8 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
 
     if (showTooltip) {
       this.timeSeriesChartWidgetSettingsForm.get('tooltipTrigger').enable();
+      this.timeSeriesChartWidgetSettingsForm.get('tooltipLabelFont').enable();
+      this.timeSeriesChartWidgetSettingsForm.get('tooltipLabelColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFont').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFormatter').enable();
@@ -223,6 +227,9 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
         this.timeSeriesChartWidgetSettingsForm.get('tooltipDateInterval').disable();
       }
     } else {
+      this.timeSeriesChartWidgetSettingsForm.get('tooltipTrigger').disable();
+      this.timeSeriesChartWidgetSettingsForm.get('tooltipLabelFont').disable();
+      this.timeSeriesChartWidgetSettingsForm.get('tooltipLabelColor').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFont').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueColor').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFormatter').disable();
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index f4f8b4fced..35f48dfc0c 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4453,6 +4453,7 @@
         "trigger": "Trigger",
         "trigger-point": "Point",
         "trigger-axis": "Axis",
+        "label": "Label",
         "value": "Value",
         "date": "Date",
         "show-date-time-interval": "Show date time interval",