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>
  );
}

[zekageri]

Have you solved it? I have the same problem. The chart won't take the ratio of it's parent. It either overflows or makes the parent scrollable.

[zekageri]

I think Iam somewhat found a solution to this. If you interested I can share it

[escwxyz]

I think Iam somewhat found a solution to this. If you interested I can share it

Please, got the same issue.

[andresg747]

I'm on the same train. I'd appreciate that you share how you managed to solve it @zekageri

[zekageri]

So I placed the chart into a Card component and did it like this:

import { CartesianGrid, ResponsiveContainer, Line, LineChart, XAxis, YAxis } from "recharts"
import { ChartContainer, ChartTooltip } from "@/components/ui/chart"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

<CardContent className="p-0 sm:p-6 sm:pt-0 h-[calc(100%-theme(spacing.24))]">
    <ChartContainer config={chartConfig} className="h-full w-full">
        <ResponsiveContainer width="100%" height="100%">
            <LineChart data={chartData} margin={{ top: 20, right: 30, bottom: 20, left: 20 }}>
                { /* Chart things here like axis ant tooltip */ }
            </LineChart>
        </ResponsiveContainer>
    </ChartContainer>
</CardContent>

I assume it will work without Card component, with just a regular div if you calc out the height of it. chartConfig and chartData is irrelevant in this case.

[escwxyz]

I think Iam somewhat found a solution to this. If you interested I can share it

Please, got the same issue.

I override the container with the following:

className="h-[450px] !aspect-auto"