diff --git a/src/components/Charts/HorizontalBarChart.jsx b/src/components/Charts/HorizontalBarChart.jsx
index 581fd8ba..65722607 100644
--- a/src/components/Charts/HorizontalBarChart.jsx
+++ b/src/components/Charts/HorizontalBarChart.jsx
@@ -9,7 +9,18 @@ const HorizontalBarChart = ({
     "#1E90FF", "#00BFFF", "#9370DB", "#6A0DAD", "#A9A9A9",
     "#6A5ACD", "#FFA500", "#FF4500", "#20B2AA", "#708090",
   ],
+  loading = false,
 }) => {
+  // Show loading state
+  if (loading) {
+    return (
+      <div className="w-full h-[380px] flex items-center justify-center bg-gray-100 rounded-xl">
+        <span className="text-gray-500 text-sm">Loading chart...</span>
+        {/* Replace this with a skeleton or spinner if you prefer */}
+      </div>
+    );
+  }
+
   // Guard clause for invalid or incomplete data
   const hasValidData =
     Array.isArray(seriesData) &&
@@ -48,14 +59,14 @@ const HorizontalBarChart = ({
         distributed: true,
         horizontal: true,
         dataLabels: {
-          position: "start",
+          position: "center",
         },
       },
     },
     colors,
     dataLabels: {
       enabled: true,
-      textAnchor: "start",
+      textAnchor: "center",
       style: {
         colors: ["#000"], // Black labels
       },
@@ -108,6 +119,7 @@ HorizontalBarChart.propTypes = {
   seriesData: PropTypes.arrayOf(PropTypes.number),
   categories: PropTypes.arrayOf(PropTypes.string),
   colors: PropTypes.arrayOf(PropTypes.string),
+  loading: PropTypes.bool,
 };
 
 export default HorizontalBarChart;