From 2d4cf8558eaf539129756a77093f9b42ef81992e Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Wed, 15 Oct 2025 12:43:41 +0300
Subject: [PATCH] fixed bar chart label position

---
 .../widget/lib/chart/latest-chart.component.scss       | 10 ++++++++--
 .../widget/lib/chart/latest-chart.component.ts         |  4 ----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.scss
index 2eb0ceb940..e373fcc263 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.scss
@@ -51,7 +51,7 @@
       flex-direction: row-reverse;
     }
     .tb-latest-chart-shape {
-      flex: 1;
+      flex: 1 1 100%;
       min-width: 10px;
       min-height: 10px;
       display: flex;
@@ -95,8 +95,14 @@
     &.legend-right, &.legend-left {
       gap: 24px;
       .tb-latest-chart-legend {
+        flex: 0 1 auto;
+        overflow: hidden auto;
+        max-height: 100%;
+        flex-wrap: nowrap;
+        min-width: fit-content;
+        max-width: 100%;
         flex-direction: column;
-        justify-content: center;
+        justify-content: flex-start;
         align-items: stretch;
         .tb-latest-chart-legend-item {
           flex-direction: row;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts
index 85905dfd3e..1fa0437cea 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts
@@ -181,17 +181,13 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private onResize() {
     if (this.legendHorizontal) {
-      this.renderer.setStyle(this.chartShape.nativeElement, 'max-width', null);
       this.renderer.setStyle(this.chartShape.nativeElement, 'min-width', null);
-      this.renderer.setStyle(this.chartLegend.nativeElement, 'flex', null);
     }
     const shapeWidth = this.chartShape.nativeElement.getBoundingClientRect().width;
     const shapeHeight = this.chartShape.nativeElement.getBoundingClientRect().height;
     const size = Math.min(shapeWidth, shapeHeight);
     if (this.legendHorizontal) {
-      this.renderer.setStyle(this.chartShape.nativeElement, 'max-width', `${size}px`);
       this.renderer.setStyle(this.chartShape.nativeElement, 'min-width', `${size}px`);
-      this.renderer.setStyle(this.chartLegend.nativeElement, 'flex', '1');
     }
   }