Chart is not getting drawn at the center of the view

[sachin-sable]

Pie chart is always drawn with it's center as parent view's top left corner. How to give the center point as Parent View's center?

[sachin-sable]

[shalini3001]

I have exactly the same issue. It looks like it happens only with Pie chart.

[Ansalibrahim]

have you tried "justify-content:centre" and "align-items:centre" in your chart style.

Since it is not a General issue I would strongly suggest you to post the code including the styles of the parent layout and the chart layout

[marzolfb]

@sachin-sable @shalini3001 Could one of you provide some sample data/code that helps show how to reproduce the result? I tried tweaking the example app so that it only showed the pie chart and I couldn't get the same behavior as stated above. I even removed the style and contentContainerStyle attributes from the parent ScrollView and I didn't get the same behavior when running on the iOS simulator. Here's the reduced snippet from the index.ios.js file from the example app:

class example extends React.Component {
  render() {
    return (
      <ScrollView>
       <Pie
          data={sampleData.pie.data}
          options={sampleData.pie.options}
          accessorKey="population" />
      </ScrollView>)
  }
}

and it comes out looking like this:

[Jarda8]

I have the same issue too. The code and the data are taken from the example project (src in attachment).

return (
          <ScrollView style={{flex:1,backgroundColor:'#F5FCFF'}}
                  contentContainerStyle={{justifyContent:'center',alignItems:'center'}}>
            <Pie
              data={data}
              options={options}
              accessorKey="population" />
          </ScrollView>
        );

The result is the same without styling. I am running it with Exponent on Genymotion Android emulator (Google Nexus 5X - 6.0.0 - API 23).
ExpensesPiechart.js.txt

[marzolfb]

@Jarda8 Thanks for the example code/data. I tried running your example with the most recent merged changes that upgraded this project to React Native 0.35 with your identical setup (Exponent+Genymotion+same device you have above), and I didn't see the behavior of the pie chart showing up in the top left corner - I saw it correctly rendered in the center like so:

So maybe the upgrade to React Native 0.35 addressed this issue? Could you give the latest changes a try and see if that fixes it for you?

[SimchaShats]

@sachin-sable I had the same bug, to Fix it need to add property "center: [100, 100]" or other coordinates to options of pie... But here is another bug, that it doesn't draw pie if there only 1 field with data... and one more thing it can be good to add custom colours feature...

[marzolfb]

@SimchaShats Could you put the "pie graph doesn't render with only 1 data item" bug you mentioned above into a separate issue?

I think the "adding custom colors" feature you mentioned above, is covered by #5 (Thanks for the helpful feedback on that one).

Given all this, once we have a new issue for the pie graph with 1 data item bug, I will close this one out.

[SimchaShats]

Ok