bubble

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.html

@@ -280,7 +280,7 @@
   </div>
   
   <!-- Chart container -->
-  <div style="position: relative; height: calc(100% - 50px); width: 100%;">
+  <div style="position: relative; height: calc(100% - 80px); width: 100%; padding: 0 10px 30px 10px;">
     <!-- Loading indicator -->
     <div *ngIf="!dataLoaded" style="text-align: center; padding: 20px; color: #666; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%;">
       Loading data...
@@ -303,7 +303,8 @@
     [style.top]="'0'"
     [style.left]="'0'"
     [style.height]="'100%'"
-    [style.width]="'100%'">
+    [style.width]="'100%'"
+    [style.padding]="'0 10px 20px 10px'">
   </canvas>
   </div>
 </div>

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.ts

@@ -45,6 +45,11 @@ export class BubbleChartComponent implements OnInit, OnChanges {
         title: {
           display: true,
           text: 'X Axis'
+        },
+        ticks: {
+          autoSkip: false,
+          maxRotation: 45,
+          minRotation: 45
         }
       },
       y: {
@@ -89,6 +94,15 @@ export class BubbleChartComponent implements OnInit, OnChanges {
         hoverRadius: 12,
         hoverBorderWidth: 3
       }
+    },
+    // Add padding to ensure x-axis labels are visible
+    layout: {
+      padding: {
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 30
+      }
     }
   };