From 19df5a55ff9e4aadfa0dcbdad0e7a7071b08fe5a Mon Sep 17 00:00:00 2001
From: Vaibhav Surve <vaibhav.surve@marcoaiot.com>
Date: Tue, 15 Apr 2025 15:36:52 +0530
Subject: [PATCH] dynamically adjust chart height and bar height based on data
 points in HorizontalBarChart

---
 src/components/Charts/HorizontalBarChart.jsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Charts/HorizontalBarChart.jsx b/src/components/Charts/HorizontalBarChart.jsx
index 86f05668..79b47b13 100644
--- a/src/components/Charts/HorizontalBarChart.jsx
+++ b/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>
   );