Making non-square charts responsive?

[kylekz]

using the radial chart - stacked example, it's constrained to a square container: https://v0.dev/chat/D3w3SS1Usyu?b=b_1UyZynWT5HP

i have a grid of three in a row and i'm struggling to make them actually responsive. instead, they're stuck in their fixed svg viewbox and get cut off, or get stuck in their aspect ratio. the closest i've gotten is making the grid container have a fixed height, set aspect-square, then set a high enough maximum size so that there's enough padding on top.

chrome_iFdfHwU4pC.mp4

removing the fixed parent container height then:

setting w-full aspect-auto min-h-30 results in a chart with 0 height

setting w-full min-h-30, so defaulting to aspect-video results in whatever this is:

chrome_9BYLiyqIwX.mp4

setting the minimum height doesn't actually do much either. min-h-30 is functionally the same as min-h-3 somehow. its only until i set min-h-36 it overflows out the side.

i realize this is just a skill issue in how svg viewboxes and recharts work, but nothing about this is responsive at all. i've looked through a bunch of the hacks provided in recharts/recharts#172 to no avail. what's the solution here?

<div className="grid gap-4 rounded-lg border border-border p-4">
  <MyRadialChart />
  <MyRadialChart />
  <MyRadialChart />
</div>

function MyRadialChart({ title, color, score }: Props) {
  return (
    <div className="flex flex-col items-center gap-2">
      <p className="text-sm font-semibold">{title}</p>

      <ChartContainer config={chartConfig} className="w-full min-h-30">
        <RadialBarChart
          data={chartData}
          endAngle={180}
          innerRadius={80}
          outerRadius={130}
        >
          <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
            <Label
              content={({ viewBox }) => {
                if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                  return (
                    <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
                      <tspan
                        x={viewBox.cx}
                        y={(viewBox.cy || 0) - 16}
                        className="fill-foreground text-2xl font-bold"
                      >
                        {score.toFixed(2)}/5
                      </tspan>
                    </text>
                  );
                }
              }}
            />
          </PolarRadiusAxis>
          <RadialBar
            dataKey="background"
            fill="hsl(var(--accent))"
            stackId="a"
            className="stroke-transparent stroke-2"
            max={5}
          />
          <RadialBar
            dataKey="score"
            stackId="a"
            fill={color}
            className="stroke-transparent stroke-2"
            max={5}
          />
        </RadialBarChart>
      </ChartContainer>
    </div>
  );
}