text controlled for donut chart

resources/assets/sass/app.css

@@ -452,6 +452,33 @@ html[dir='rtl'] .el-input__suffix {
   }
  /* element-ui */
 
+ /* apex-chart */
+    .apexcharts-donut-custom span.apexcharts-legend-text {
+        display: -webkit-box !important;
+        -webkit-line-clamp: 1 !important;
+        -webkit-box-orient: vertical !important;
+        overflow: hidden !important;
+        height: 1rem !important;
+    }
+
+    .apexcharts-donut-custom .apexcharts-legend-series {
+        display: flex !important;
+        align-items: center !important;
+    }
+
+    .apexcharts-donut-custom .apexcharts-legend {
+        padding: 0 !important;
+    }
+
+    .apexcharts-donut-custom .apexcharts-legend-marker {
+        width: 18px !important;
+    }
+
+    .apexcharts-donut-custom-report .apexcharts-legend-marker {
+        width: 12px !important;
+    }
+ /* apex-chart */
+
  /* collapse */
  .active-collapse {
     @apply opacity-100;

resources/views/components/reports/summary/chart.blade.php

@@ -18,7 +18,7 @@
             {!! $charts['bar']->container() !!}
         </div>
 
-        <div x-show="toggle === 'bar'">
+        <div class="apexcharts-donut-custom apexcharts-donut-custom-report" x-show="toggle === 'bar'">
             {!! $charts['donut']->container() !!}
         </div>
     </div>

resources/views/widgets/donut_chart.blade.php

@@ -1,4 +1,4 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }} my-8">
+<div id="widget-{{ $class->model->id }}" class="apexcharts-donut-custom {{ $class->model->settings->width }} my-8">
     @include($class->views['header'], ['header_class' => ''])
 
     <div class="flex flex-col lg:flex-row mt-3" id="widget-donut-{{ $class->model->id }}">