Centering PieChart

[bberak]

Hi there,

Thanks for maintaining this project - it looks really great :)

Is it possible to center the PieChart? Mine a bit off-center

I'm using v4.1.0 and my code is below:

<ProgressChart
              data={{
                data: [0.4]
              }}
              width={100}
              height={100}
              chartConfig={{
                backgroundColor: "#e26a00",
                backgroundGradientFrom: "#fb8c00",
                backgroundGradientTo: "#ffa726",
                decimalPlaces: 2, // optional, defaults to 2dp
                color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                style: {
                  borderRadius: 16
                },
                propsForDots: {
                  r: "6",
                  strokeWidth: "2",
                  stroke: "#ffa726"
                }
              }}
              hideLegend={true}
            />

Cheers!

[Hermanya]

The hideLegend implementation is pretty basic and does not support this right now. Fixing this would be an awesome PR!

[bberak]

Cool, I'll take a look - cheers!

[laurpantelimon]

Anything new about this?

[amineba1]

anything new about this ?

[wscld]

found a temporary solution: style={{marginLeft:'auto',marginRight:'auto',left:0,right:0}}

[yurischulz]

Try this:

<PieChart
   width={220}
   height={220}
   center={[50, 0]}

   data={summary_chart}
   hasLegend={false}
   chartConfig={{
      color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
   }}
   accessor="population"
   backgroundColor="transparent"
   paddingLeft="0"
   absolute
/>

By using the center prop, you can control the chart's position within its container. Combine this with fixed width and height to achieve the desired layout.