Random appearing text on ios devices on LineChart

[DeveloperOskar]

Hello! I have implemented a lineChart and I have some random text on the upper left side of the chart. I have no ide why and it only appears on iOS devices,

Here is the code:

Here you see the bugg i'm talking about:

[sallarahmed]

the same issue is anyone got the solution.

[MilanObradovic]

Same here, it seems that it copies the renderDotContent to that specific place (removing renderDotContent removes that text too).

[faizantariq1]

Hi, @DeveloperOskar did you find the solution?

[bvelasquez]

Having the same issue with renderDotContent. Has anyone posted a PR for this fix?

[bvelasquez]

Below seems to work for me. I put the text in a view and use absolute position.

<View style={{height: 200}}>
                <LineChart
                  data={values}
                  width={Dimensions.get('window').width - 30}
                  height={200}
                  yAxisInterval={0.25}
                  fromZero={true}
                  renderDotContent={({x, y, index, indexData}) => {
                    return (
                      <View
                        key={x + y}
                        style={{
                          position: 'absolute',
                          top: y + 5,
                          left: x - 4,
                        }}>
                        <Text style={{color: 'white'}}>{indexData}</Text>
                      </View>
                    );
                  }}
                  chartConfig={{
                    backgroundColor: Colors.primaryRed,
                    backgroundGradientFrom: Colors.primaryRed,
                    backgroundGradientTo: Colors.primaryRed,
                    decimalPlaces: 2, // optional, defaults to 2dp
                    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                    labelColor: (opacity = 1) =>
                      `rgba(255, 255, 255, ${opacity})`,
                    propsForLabels: {
                      style: {
                        fontWeight: 'bold',
                      },
                    },
                    propsForDots: {
                      r: '6',
                      strokeWidth: '2',
                      stroke: Colors.carbsColor,
                    },
                  }}
                  bezier
                  style={{
                    marginVertical: 0,
                    borderRadius: 16,
                  }}
                />
              </View>

[VincentDEJ]

Embed Text in View works well ! Thanks !