diff --git a/src/components/dashboard/reports/LoanDetails/RadialBarChart.jsx b/src/components/dashboard/reports/LoanDetails/RadialBarChart.jsx
new file mode 100644
index 0000000..69e0bc0
--- /dev/null
+++ b/src/components/dashboard/reports/LoanDetails/RadialBarChart.jsx
@@ -0,0 +1,47 @@
+import Chart from "@/core/components/Chart";
+import {calculateGradientColor} from "@/core/utils/gradientColorHandler";
+
+const RadialBarChart = ({data}) => {
+    const specialOption = {
+        title: {
+            text: undefined,
+        },
+        plotOptions: {
+            radialBar: {
+                startAngle: -90,
+                endAngle: 90,
+                track: {
+                    background: "#e7e7e7",
+                    strokeWidth: '90%',
+                    margin: 5, // margin is in pixels
+                    dropShadow: {
+                        enabled: true,
+                        top: 2,
+                        left: 0,
+                        color: '#999',
+                        opacity: 1,
+                        blur: 2
+                    }
+                },
+                dataLabels: {
+                    name: {
+                        show: false
+                    },
+                    value: {
+                        offsetY: -2,
+                        fontSize: '22px'
+                    }
+                }
+            }
+        },
+        fill: {
+            colors: calculateGradientColor(data)
+        },
+    };
+    const series = [data]
+    return (
+        <Chart chartId="LoanProgressBar" type="radialBar" specialOption={specialOption} series={series}/>
+    )
+};
+
+export default RadialBarChart;
\ No newline at end of file