fixed bar chart label position

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;

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');
     }
   }