1

There are already other resources which seem to work for some people, but in this case it doesn't work and I cannot figure out a workaround.

Similar resources:

I created a sandbox for it here

Suggestions to solve this, were the use of ResponsiveContainer component (provided by recharts), but that doesn't work as you can see in the sandbox.

Plus, the original example provided by recharts and viewable here doesn't work either (try changing the width and height on the jsFiddle example to 100vw and 100vh and then resize the window to 320px and you will see the text getting cropped).

Referring to the Github closed issues, it seems they were pointing out the problem on cx, cy, innerRadius and outerRadius attributes being set as px instead of percentages and that's what caused the issue, but the jsFiddle provided are not working and I cannot figure out how to achieve that with percentages.

Any helping input would be highly appreciated, thank you!

ale917k
  • 1,494
  • 7
  • 18
  • 37
  • 1
    When I resize the window, then the grid breaks down until there is only one single item in a row. Is that not what you want? It looks responsive to me. – Gh05d Sep 24 '20 at 14:45
  • The grid has no problem, is the chart svg which doesn't scale but get just cropped - See screenshot here: https://ibb.co/RDpkz1f – ale917k Sep 24 '20 at 15:14
  • 1
    By only changing the `innterRadius` and `outerRadius` properties to percentages, I could make it scale. Unfortunately, it still gets cropped. But I couldn't find any `overflow: hidden` in the styles, which was strange. – Gh05d Sep 25 '20 at 05:28

6 Answers6

1

Does the following solution work for you?

sandbox link

I have changed cx, innerRadius and outerRadius values from px to a % value

Kush R.
  • 296
  • 1
  • 5
  • I don't feel this is a solution since the text gets still cropped, but the charts are at least now responsive.. so it's surely the best answer so far, but not a solution since at 320px is almost impossible to fit the text without cropping it – ale917k Oct 02 '20 at 06:04
1

The main problem is how you calculated the position of the ActiveShape component.

  const RADIAN = Math.PI / 180;
  const sin = Math.sin(-RADIAN * midAngle);
  const cos = Math.cos(-RADIAN * midAngle);
  const sx = cx + (outerRadius + 10) * cos;
  const sy = cy + (outerRadius + 10) * sin;
  const mx = cx + (outerRadius + 30) * cos;
  const my = cy + (outerRadius + 30) * sin;
  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
  const ey = my;
  const textAnchor = cos >= 0 ? "start" : "end";

In my opnion, I think you should use a hook to get the windown size. After that, you just need to check if the positions of the ActiveShape component is inside the screen. If it is not, you just recalculate ex, ey, sx,sy, mx, my. Have fun :)

Vu Luu
  • 792
  • 5
  • 16
  • I think this is may actually be a valid solution, but I don't feel we should update the whole chart just for responsiveness.. – ale917k Oct 02 '20 at 06:00
0

Your recharts is not working because you are forcing responsiveness using responsiveContainer and grid both. Do one thing only.

  • Remove width, height restrictions from code <ResponsiveContainer width="100%" height="100%">

OR

  • Remove Grid from css
...
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px;
...

Sandbox for former and later approach is here & here

breakit
  • 356
  • 2
  • 8
  • This is not what causes the issue, and you can notice that in both your sandbox as the text is getting cropped on both of them.. The grid is just laying all the chart elements, the problem here is the chart svg overflow its own container. – ale917k Oct 02 '20 at 05:56
0

getting height and width to 99% solved this problem for us

<ResponsiveContainer width="99%" height="99%"></ResponsiveContainer>
Maha BENJEBARA
  • 232
  • 4
  • 12
  • Not sure if that solves the issue really.. The charts are responsive, but they don't care about neither the size of your text, or how long that is, so you may never be able to make it fully scalable until 320px - Solution here would be to resize the font based on the resolution, but it's more complicated than it sounds as you would need to recalculate the position of the lines connecting the chart to the text (see @Vu Luu answer), apart from scaling down the font size (of which you may just need vmin and vmax) – ale917k Jan 19 '21 at 19:42
0

got same issue.. adding a div with class flex, justify-center worked for me..

<div className="flex justify-center items-center">
         <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
        <Pie
          data={data}
          cx={120}
          cy={200}
          innerRadius={60}
          outerRadius={80}
          fill="#8884d8"
          paddingAngle={5}
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        <Pie
          data={data}
          cx={420}
          cy={200}
          startAngle={180}
          endAngle={0}
          innerRadius={60}
          outerRadius={80}
          fill="#8884d8"
          paddingAngle={5}
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
      </PieChart>
      </div>
Dharman
  • 30,962
  • 25
  • 85
  • 135
Pooja Priyadarshini
  • 1
0

got same issue.. adding a div with class flex, justify-center worked for me..

<div className="flex justify-center items-center">
         <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
        <Pie
          data={data}
          innerRadius={60}
          outerRadius={80}
          fill="#8884d8"
          paddingAngle={5}
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        </PieChart>
      </div>
Dharman
  • 30,962
  • 25
  • 85
  • 135
Pooja Priyadarshini
  • 1