dynamically adjust chart height and bar height based on data points in HorizontalBarChart

src/components/Charts/HorizontalBarChart.jsx

@@ -46,19 +46,23 @@ const HorizontalBarChart = ({
   // Replace 0 with 1 for visual purposes, but display "0%" in labels
   const adjustedSeriesData = sortedSeriesData.map(val => (val === 0 ? 1 : val));
 
+  // Dynamically adjust chart height if only one data point
+  const chartHeight = seriesData.length === 1 ? 80 : 380;
+
   const chartOptions = {
     chart: {
       type: "bar",
-      height: 380,
+      height: chartHeight,
       toolbar: { show: false },
     },
     grid: { show: false },
     plotOptions: {
       bar: {
-        barHeight: "60%",
+        barHeight: seriesData.length === 1 ? "30%" : "60%",
         distributed: true,
         horizontal: true,
-        borderRadius: 10,
+        borderRadius: 3,
+        borderRadiusApplication: "end",
         dataLabels: {
           position: "top",
         },
@@ -110,7 +114,7 @@ const HorizontalBarChart = ({
         options={chartOptions}
         series={[{ data: adjustedSeriesData }]}
         type="bar"
-        height={380}
+        height={chartHeight}
       />
     </div>
   );