polr

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

@@ -279,10 +279,11 @@
     </div>
   </div>
   
-  <div style="position: relative; height: calc(100% - 50px);">
+  <div style="position: relative; height: calc(100% - 80px); padding: 0 10px 30px 10px;">
     <canvas baseChart
       [datasets]="polarAreaChartData"
       [labels]="polarAreaChartLabels"
+      [options]="polarAreaChartOptions"
       [type]="polarAreaChartType"
       (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)">

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

@@ -90,6 +90,32 @@ export class PolarChartComponent implements OnInit, OnChanges {
     { data: [ 300, 500, 100, 40, 120 ], label: 'Series 1'}
   ];
 
+  public polarAreaChartOptions: any = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 30
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'top'
+      }
+    },
+    scales: {
+      r: {
+        ticks: {
+          backdropColor: 'rgba(0, 0, 0, 0)'
+        }
+      }
+    }
+  };
+
   public polarAreaChartType: string = 'polarArea';
   
   // Multi-layer drilldown state tracking