Fixed chart

src/components/RadialChart.tsx

@@ -2,7 +2,7 @@
 
 import {
   Label,
-  PolarAngleAxis,
+  PolarGrid,
   PolarRadiusAxis,
   RadialBar,
   RadialBarChart,
@@ -15,8 +15,6 @@ const chartConfig = {
   },
 } satisfies ChartConfig;
 
-const INNER_RADIUS = 80;
-
 export default function RadialChart({
   value,
   children,
@@ -25,25 +23,22 @@ 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="w-full aspect-square">
       <RadialBarChart
         data={chartData}
-        startAngle={startAngle}
+        startAngle={230 - 360 * (value / 100)}
-        endAngle={startAngle - (value / 100) * totalSweep}
+        endAngle={230}
-        innerRadius={INNER_RADIUS}
+        innerRadius={80}
-        outerRadius={INNER_RADIUS + 30}
+        outerRadius={110}
       >
-        <PolarAngleAxis
+        <PolarGrid
-          type="number"
+          gridType="circle"
-          domain={[0, 100]}
+          radialLines={false}
-          tick={false}
+          stroke="none"
-          tickLine={false}
+          className="first:fill-muted last:fill-background"
-          axisLine={false}
+          polarRadius={[86, 74]}
-          ticks={[]}
         />
         <RadialBar dataKey="value" background cornerRadius={10} />
         <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>