Semi Pie Chart taking up to much space?

[yusuf8ahmed]

Hi Guys,
I am currently making a dashboard, because i want to learn css flexbox, grid, tailwind and jsx. The current problem is that i want to put buttons under the PieChart but there is too much space for some reason?

My grid tailwindcss classNames are:
grow h-full grid grid-cols-3 grid-rows-4 auto-rows-min sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch

My tailwindcss classNames for this box is:
flex flex-col row-span-1 rounded-xl border-1 border-slate-400/10 bg-gray-100 p-4 dark:bg-slate-900 lg:row-span-2

And this is my PieChart inside the box above:

<div className="flex flex-row items-center justify-between flex-none">
  <div className="flex flex-row items-center">
    <CreditScoreIcon />  
    <p className="m-0 ml-1">Spending Summary</p>
  </div>

  <Select defaultValue="week">
    <SelectTrigger className="ml-auto max-w-max pr-2">
      <SelectValue placeholder="This Week"/>
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="day">Today</SelectItem>
      <SelectItem value="week">This Week</SelectItem>
      <SelectItem value="month">Last 30 days</SelectItem>
    </SelectContent>
  </Select>
</div>
<ResponsiveContainer width="100%" className="min-h-0 shrink" aspect={1.2}>
  <PieChart margin={{ top: 0, left: 0, right: 0, bottom: 0 }} fill="teal">
    <Pie
      data={pieChartData}
      startAngle={180}
      endAngle={0}
      innerRadius="60%"
      outerRadius="80%"
      fill="#8884d8"
      dataKey="value"
      // blendStroke
      // stroke={{opacity: 1}}
    >
      {pieChartData.map((_, index) => (
        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
      ))}
    </Pie>
  </PieChart>
</ResponsiveContainer>

example below when i put a separator (br element) after the separator

[ckifer]

hey @yusuf8ahmed, this is going to be difficult to help with without a reproduction. Could you make a minimal codesandbox?

[ckifer]

Hmm, the sandbox isn't working for me

[yusuf8ahmed]

what is it showing on your side?

[ckifer]

The code is there it just won't run, I get some random build failures

[CODESANDBOX] .codesandbox/Dockerfile detected
[CODESANDBOX] Waiting for container build to finish...
Failed to run containers exec run: Waiting for condition timed out

I might have to download it

[ckifer]

Okay I pulled this down and took a look.

Basically recharts piechart does not currently adjust when the size of the chart itself changes. The size of the screen yes, but since you are only rendering 180 to 0 (half a circle) the container is still assuming you are taking up double that space.

commenting out your startAngle/endAngle makes that relatively evident.

If you want you can create a separate issue that details this, sorry for the inconvenience!

A hacky way to get around it for now is to add a whole lot of negative bottom margin (like -250)

[yusuf8ahmed]

Is there a way that i could make it responsive (instead of -250px)?, and i wanted to fix recharts, to start recognizing that the PieChart is half height, where should i start in the repo?

also i really appreciate all the help, it is open source maintainers like you that keep the spirit of collaboration and community alive.

[ckifer]

With should be responsive with your container. Height however will always need to be fixed regardless if this is working or not.

Sure, I can take a look some point. Will get back in the next few days

@nikolasrieble if you have any ideas of where this could be done

[nikolasrieble]

While this is easy for a single Pie in a PieChart, how about multiple Pies? Each have their own start and endAngle. We would have to aggregate all start and endAngles across the Pies, and then render them accordingly. It seems that they are currently rendered independently.

We could expose the startAngle and endAngle on the PieChart API (as opposed to the Pie API).

Another solution

Alternative to a negative margin, you could use cy to set the relative center y of the Pie.

export default function App() {
  return (
    <PieChart width={400} height={400}>
      <Pie
        data={data02}
        dataKey="value"
        innerRadius={70}
        outerRadius={90}
        startAngle={120}
        endAngle={180}
        cy="80%"
      />
    </PieChart>
  );
}

[ckifer]

Thanks Niko. Yeah cy might be a better solution here, forgot about that.

Imo a PieChart should only ever have one Pie in it, if it has more id recommend creating a separate PieChart.
Ideally the content in the fixed height container fills that height with little or no empty space when margin is 0 (easier said than done of course)