Updated chart for mobile

src/components/RadialChart.tsx

@@ -2,7 +2,7 @@
 
 import {
   Label,
-  PolarGrid,
+  PolarAngleAxis,
   PolarRadiusAxis,
   RadialBar,
   RadialBarChart,
@@ -15,6 +15,8 @@ const chartConfig = {
   },
 } satisfies ChartConfig;
 
+const INNER_RADIUS = 80;
+
 export default function RadialChart({
   value,
   children,
@@ -23,22 +25,25 @@ export default function RadialChart({
   children?: React.ReactNode;
 }) {
   const chartData = [{ value, fill: "var(--color-chart-1)" }];
+  const startAngle = 230;
+  const totalSweep = 280;
 
   return (
-    <ChartContainer config={chartConfig} className="size-30">
+    <ChartContainer config={chartConfig} className="w-full aspect-square">
       <RadialBarChart
         data={chartData}
-        startAngle={-50}
-        endAngle={(value / 100) * 230}
-        innerRadius="65%"
-        outerRadius="100%"
+        startAngle={startAngle}
+        endAngle={startAngle - (value / 100) * totalSweep}
+        innerRadius={INNER_RADIUS}
+        outerRadius={INNER_RADIUS + 30}
       >
-        <PolarGrid
-          gridType="circle"
-          radialLines={false}
-          stroke="none"
-          className=""
-          polarRadius={[86, 74]}
+        <PolarAngleAxis
+          type="number"
+          domain={[0, 100]}
+          tick={false}
+          tickLine={false}
+          axisLine={false}
+          ticks={[]}
         />
         <RadialBar dataKey="value" background cornerRadius={10} />
         <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
@@ -57,7 +62,7 @@ export default function RadialChart({
                       y={viewBox.cy}
                       className="fill-foreground text-xl font-bold"
                     >
-                      {chartData[0].value.toLocaleString()}
+                      {chartData[0].value.toFixed(1)}%
                     </tspan>
                     <tspan
                       x={viewBox.cx}