Top and left of pie chart always squared cut off.

[ggaabe]

Hola,

I said I would make another issue and now I am!

So the top of the pie chart is always slightly cut off. Even if I add to the marginTop to push it away from other things, or make the pie chart twice as large, it remains just slightly squared down, like a razor scooter wheel that someone hit the brakes on for too long while skidding:

I think the grid, whether visible or not, possibly slightly affecting it. Note: This is much more noticeable in iOS simulation than it is when compiled on a physical device. It's not really noticeable on a physical device unless you really have a compulsion for perfection.

[tomauty]

Ah yeah, I've noticed this too. Not sure what the deal is. My guess was that the radius may be too large for the container, but then I would think all sides would be affected.

[ggaabe]

I think the center of the circle isn't in the dead center of the available space. If you look at the second picture, there's just a little bit of space between the bottom of the circle and the x axis, but on the left side, there is absolutely no space between the pie and the y axis. The circle touches it, and the rest is cut off. If the center is shifted slightly rightward and downward, it should be good.

[tomauty]

I wonder if it has to do with this layout initialization code in Chart.js

    _onContainerLayout = (e : Object) => this.setState({
        containerHeight: Math.ceil(e.nativeEvent.layout.height) + 1,
        containerWidth: Math.ceil(e.nativeEvent.layout.width),
    });

Maybe the ceil and +1 are shifting over somehow?

[ggaabe]

Yeah, ceil lacks precision because it'll always bump up to the nearest integer. Maybe you should add 1 and then round on the height? Like this: containerHeight: Math.round(e.nativeEvent.layout.height + 1)

And since it's a little too far over to the left, maybe we could add 1 to the containerWidth as well?

[rgoldiez]

Is this a case for using the PixelRatio API? There's a method for getting the rounding right for different screen DPIs.

On Jun 17, 2016, at 3:46 PM, Gabriel Garrett [email protected] wrote:

Yeah, ceil lacks precision because it'll always bump up to the nearest integer. Maybe you should add 1 and then round on the height? Like this: containerHeight: Math.round(e.nativeEvent.layout.height + 1)

On Fri, Jun 17, 2016 at 3:41 PM, Tom Auty [email protected] wrote:

I wonder if it has to do with this layout initialization code in Chart.js

_onContainerLayout = (e : Object) => this.setState({ containerHeight: Math.ceil(e.nativeEvent.layout.height) + 1, containerWidth: Math.ceil(e.nativeEvent.layout.width), });

Maybe the ceil and +1 are shifting over somehow?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tomauty/react-native-chart/issues/82#issuecomment-226876258, or mute the thread https://github.com/notifications/unsubscribe/AFMGoYjcqgblxHyQlsc3Ss35uhC9rtwRks5qMwZogaJpZM4I4tNd .

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[tomauty]

Ah right, that's probably what I'm looking for in this case. I'll experiment. Feel free to do the same :)

[tomauty]

I tried out PixelRatio, but it seems it doesn't really fit our use case because we're looking for smaller numbers to round. The lowest PixelRatio.get() response is 1.

[tomauty]

As a generic FYI — I am no longer able to maintain this library. I recommend checking out victory-native as it's much more maintained.