recharts responsive pie chart with legend

[MiguelG97]

I have a problem when showing the Pie and the legend. Apparently, if the legend is to wide, it tends to remove space from the pie chart. Shouldn't the responsive container calculate the values to set an appropriate overall width??

<div
    className="flex flex-row justify-between items-center
  h-full w-full"
  >
    <ResponsiveContainer
    >
      <PieChart>
        <Pie
          data={questionnaire?.chartData}
          paddingAngle={5}
          label
          nameKey={"name"}
          dataKey={"value"}
          innerRadius={60}
          outerRadius={80}
        >
          {questionnaire?.chartData.map(
            (x, index) => (
              <Cell
                stroke="0"
                key={`cell-${index}`}
                fill={`${COLORS[index]}`}
              />
            )
          )}
        </Pie>
        <Legend
          layout="vertical"
          align="right"
          verticalAlign="middle"
        />
        <Tooltip />
      </PieChart>
    </ResponsiveContainer>
  </div>

[ckifer]

Nothing magic in ResponsiveContainer - if your content is too large it will begin to overlap. SVGs require absolute positioning and so make things like true responsiveness, text wrapping, etc. difficult.

So yeah this could be an enhancement, but in general this is how recharts has worked for a long time.

Potential enhancements: collision detection, making legend relatively positioned (this would introduce regressions, probably not the right thing to do), scaling on resize (this also maybe unwanted behavior depending on the use-case)

A lot of things to consider in order to get to a place where this is nicer unfortunately

[MiguelG97]

Great, thanks for the clarifications!