Trouble with pie chart height

[maximerivolet]

Hi,

I'm using the pie chart shape. I've got trouble with responsive.

Currently, the pie chart is bigger than the div. You can see below an example of what's happening :

The pie chart should stay in the grey div.

In our page, we use the ParentSize function, like this :

<ParentSize debounceTime={10}>
            {(parent) => <PieChart width={parent.width} height={parent.height} data={groupesData} />}
</ParentSize>

For the Pie Chart component, we have this :

<svg width={width} height={height}>
        <Group top={height} left={width / 2}>
          <Pie
            data={data}
            pieValue={(d) => d.value}
            pieSort={null}
            outerRadius={width / 2.5}
            innerRadius={width / 5}
            padAngle={0.01}
            startAngle={-(Math.PI / 2)}
            endAngle={Math.PI / 2}
            cornerRadius={5}
          >
            {(pie) => {
              return pie.arcs.map((arc, index) => {
                const groupeArc = arc.data
                const [centroidX, centroidY] = pie.path.centroid(arc)
                const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.2
                const justifiedMidAngle = (arc.endAngle - arc.startAngle) / 2 + arc.startAngle - Math.PI / 2
                return (
                  <g key={`arc-${groupeArc.id}-${index}`}>
                   <path
                      d={pie.path(arc)}
                      fill={groupeArc.color}
                      onMouseLeave={handleMouseLeave}
                      onMouseMove={(event) => handleMouseMove(event, arc.data)}
                    />

                    {hasSpaceForLabel && (
                      <text className="chart__number" x={centroidX} y={centroidY} dy=".33em" textAnchor="middle">
                        {groupeArc.value}
                      </text>
                    )}
                  </g>
                )
              })
            }}
          </Pie>
        </Group>
</svg>

I tried to edit width and height values for the svg bloc, the Group bloc.

Can you help me on that ?

[williaster]

Hey @GoldenIvan 👋 thanks for checking out visx. Would it be possible to put this in a codesandbox for easier tinkering? It's challenging to fully debug without that. For instance is the container overflow the grey container or the green container?

Some initial thoughts though:

• in SVG, Group (rendered as a <g />) doesn't have inherit dimensions, it depends on its child contents
• overall I think this has to do with the fact that you are using width / 2 for pie radius. Given that the shape is a circle and your angles are going from -PI, PI, that means the height would also be width / 2 (since you are rendering half a circle). Instead of using width / 2 for your height values, you are using height from the parent component (both setting the svg height to the parent value, and also offsetting the entire group by height in your <Group top={height} ... /> call). I'd try swapping those values to width / 2

[maximerivolet]

Hi @williaster,

Playing with groups was working for me !