Semi Pie Chart taking up to much space? #3846

yusuf8ahmed · 2023-10-11T20:14:44Z

yusuf8ahmed
Oct 11, 2023

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

Answered by ckifer

Oct 13, 2023

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)

View full answer

ckifer · 2023-10-11T21:45:01Z

ckifer
Oct 11, 2023
Maintainer

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

17 replies

ckifer Oct 12, 2023
Maintainer

Hmm, the sandbox isn't working for me

yusuf8ahmed Oct 12, 2023
Author

what is it showing on your side?

ckifer Oct 12, 2023
Maintainer

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 Oct 13, 2023
Maintainer

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)

Answer selected by ckifer

yusuf8ahmed Oct 14, 2023
Author

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 Oct 14, 2023
Maintainer

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 Oct 14, 2023
Maintainer

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 Oct 14, 2023
Maintainer

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)

Uh oh!

Semi Pie Chart taking up to much space? #3846

Uh oh!

yusuf8ahmed Oct 11, 2023

Replies: 1 comment · 17 replies

Uh oh!

ckifer Oct 11, 2023 Maintainer

Uh oh!

ckifer Oct 12, 2023 Maintainer

Uh oh!

yusuf8ahmed Oct 12, 2023 Author

Uh oh!

ckifer Oct 12, 2023 Maintainer

Uh oh!

ckifer Oct 13, 2023 Maintainer

Uh oh!

yusuf8ahmed Oct 14, 2023 Author

Uh oh!

ckifer Oct 14, 2023 Maintainer

Uh oh!

Uh oh!

nikolasrieble Oct 14, 2023 Maintainer

Another solution

Uh oh!

ckifer Oct 14, 2023 Maintainer

yusuf8ahmed
Oct 11, 2023

Replies: 1 comment 17 replies

ckifer
Oct 11, 2023
Maintainer

ckifer Oct 12, 2023
Maintainer

yusuf8ahmed Oct 12, 2023
Author

ckifer Oct 12, 2023
Maintainer

ckifer Oct 13, 2023
Maintainer

yusuf8ahmed Oct 14, 2023
Author

ckifer Oct 14, 2023
Maintainer

nikolasrieble Oct 14, 2023
Maintainer

ckifer Oct 14, 2023
Maintainer