ProgressCircle visual issue.

[ClawGibson]

What is the problem?

Using 3+ ProgressCircle, one of them resize himself.

When does it happen?

The problem comes when I put the ProgressCircle inside a View

What platform?

• [x] Android

react-native-svg-charts version: 5.4.0 react-native-svg version: 12.1.0

Code to reproduce

View container with flex.

<View style={alimentoInd.percentages}>
    <View>
        <ProgressCircle style={{ height: 50 }} progress={0.85} progressColor={'#C1CF3A'} />
        <Text style={alimentoInd.percentagesText}>Grasas</Text>
    </View>
     <View>
        <ProgressCircle style={{ height: 50 }} progress={0.8} progressColor={'#4BB5C3'} />
        <Text style={alimentoInd.percentagesText} >Carbohidratos</Text>
    </View>
    <View>
        <ProgressCircle style={{ height: 50 }} progress={0.51} progressColor={'#8AB832'} />
        <Text style={alimentoInd.percentagesText}>Proteinas</Text>
    </View>
</View>

Styles applied.

percentages: {
        flex: 1,
        marginTop: 7,
        marginBottom: 10,
        flexDirection: 'row',
        justifyContent: 'space-evenly'
    },
percentagesText: {
        textAlign: 'center'
    }

Issue example.

[austinatfaytown]

I'd like to know how you avoid that cut-off section on the left of the last two images. The first image here doesn't have that issue.

[ClawGibson]

I'd like to know how you avoid that cut-off section on the left of the last two images. The first image here doesn't have that issue.

Honestly, I hadn't realized it has happened

[mehranabi]

Hi, Any update on this issue?

[unzsnu]

I had the same problem, the circle was not round, one edge was cut off. Rounding up outerDiameter calculation did the trick.

// file: node_modules/react-native-svg-charts/src/progress-circle.js
// line: 41
const outerDiameter = parseInt(Math.min(width, height)) // adding parseInt fix the visual issue

[denissdubinin]

Having exactly same issue.

@unzsnu 's fix did a trick, but it still cut off for ~1 px and it is noticeable. Before:

[ddikodroid]

Having exactly same issue.

@unzsnu 's fix did a trick, but it still cut off for ~1 px and it is noticeable. Before:

also add parseInt on line 73 fixed the issue on me

 .outerRadius(parseInt(outerDiameter/2))