bar chart

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

@@ -16,7 +16,7 @@
   <!-- Render different chart types based on chartType input -->
   <div class="chart-wrapper">
     <!-- Bar Chart -->
-    <div *ngIf="chartType === 'bar'">
+    <div *ngIf="chartType === 'bar'" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
@@ -29,7 +29,7 @@
     </div>
 
     <!-- Line Chart -->
-    <div *ngIf="chartType === 'line'">
+    <div *ngIf="chartType === 'line'" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
@@ -42,7 +42,7 @@
     </div>
 
     <!-- Pie Chart -->
-    <div *ngIf="chartType === 'pie'">
+    <div *ngIf="chartType === 'pie'" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
@@ -55,7 +55,7 @@
     </div>
 
     <!-- Doughnut Chart -->
-    <div *ngIf="chartType === 'doughnut'">
+    <div *ngIf="chartType === 'doughnut'" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
@@ -68,7 +68,7 @@
     </div>
 
     <!-- Bubble Chart -->
-    <div *ngIf="chartType === 'bubble'">
+    <div *ngIf="chartType === 'bubble'" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="bubbleChartData"
         [options]="chartOptions"
@@ -80,7 +80,7 @@
     </div>
 
     <!-- Radar Chart -->
-    <div *ngIf="chartType === 'radar'">
+    <div *ngIf="chartType === 'radar'" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
@@ -93,7 +93,7 @@
     </div>
 
     <!-- Polar Area Chart -->
-    <div *ngIf="chartType === 'polar'">
+    <div *ngIf="chartType === 'polar'" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
@@ -106,7 +106,7 @@
     </div>
 
     <!-- Scatter Chart -->
-    <div *ngIf="chartType === 'scatter'">
+    <div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [options]="chartOptions"
@@ -118,7 +118,7 @@
     </div>
 
     <!-- Default/Unknown Chart Type -->
-    <div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)">
+    <div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"

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

@@ -30,7 +30,23 @@
 .chart-wrapper {
   position: relative;
   height: calc(100% - 100px);
-  min-height: 300px;
+  min-height: 400px; // Increased minimum height for better visibility
+  padding: 10px; // Add padding to create space around the chart
+}
+
+// Specific container for chart canvas elements
+.chart-canvas-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  padding: 15px; // Add padding around the canvas for better spacing
+  box-sizing: border-box;
+  
+  canvas {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
 
 .filters-section {
@@ -259,4 +275,8 @@
   .chart-wrapper {
     min-height: 250px;
   }
+  
+  .chart-canvas-container {
+    padding: 10px;
+  }
 }

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

@@ -255,6 +255,8 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
     this.chartOptions = {
       responsive: true,
       maintainAspectRatio: false,
+      barPercentage: 0.6, // Reduced from 0.8 to create more spacing between bars
+      categoryPercentage: 0.8, // Reduced from 0.9 to create more spacing between categories
       scales: {
         x: {
           ticks: {
@@ -276,7 +278,9 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
             font: {
               size: 12
             }
-          }
+          },
+          // Add some padding to the y-axis to prevent bars from touching the top
+          suggestedMax: 10
         }
       },
       plugins: {
@@ -286,11 +290,21 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
           labels: {
             font: {
               size: 12
-            }
+            },
+            // Add padding to legend items
+            padding: 20
           }
         },
         tooltip: {
-          enabled: true
+          enabled: true,
+          // Improve tooltip appearance
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          titleFont: {
+            size: 14
+          },
+          bodyFont: {
+            size: 12
+          }
         }
       },
       layout: {
@@ -300,6 +314,21 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
           right: 15,
           top: 15
         }
+      },
+      // Add bar chart specific options
+      indexAxis: 'x', // Horizontal bars
+      elements: {
+        bar: {
+          borderWidth: 2, // Increased border width for better visibility
+          borderSkipped: false, // Show all borders for better separation
+          // Add border color to make bars more distinct
+          borderColor: 'rgba(255, 255, 255, 0.8)' // White border for better separation
+        }
+      },
+      // Animation settings for smoother transitions
+      animation: {
+        duration: 1000,
+        easing: 'easeInOutQuart'
       }
     };
   }