React-native-chart-kit: renderDotContent is not aligned to dot

[ReallyLiri]

My code:

            <LineChart
                data={{labels, datasets}}
                width={Dimensions.get('window').width * 0.8}
                height={220}
                chartConfig={{...}}
                bezier
                fromZero
                style={{padding: 10}}
                renderDotContent={({x, y, index}) => <Text>{y}</Text>}
            />

Results in the dot text floating without any correlation to the chart:

Is there any config I'm missing?

[fung199609]

you can use absolute to set the position of points:

[liiri]

Thanks, it almost works, I'm getting the render method called twice with same input but one is placed on the far left for some reason

[liiri]

the second instance just seem to ignore the style, I'm guessing if it was always there but with same style the duplicates would just hide each other

renderDotContent={({x, y, index}) => <Text style={{position: 'relative', top: y, left: x, backgroundColor: 'red'}}>{index === 0 ? `(${x}, ${y}, ${index})` : ''}</Text>}

[MaxDagerbratt]

Im getting the same problem even though i'm using position: 'absolute'.

My code:
renderDotContent={({ x, y }) => <Text key={x + y} style={{ position: 'absolute', top: y, left: x }}>{y}</Text>}

[Kevzz81517]

@fung199609 Facing the same problem, tried position: 'absolute'.

[hoanglam10499]

same, have solved? :(

[hoanglam10499]

I think I solved it
Before:

After:

[ReallyLiri]

Works great thanks!

[kunalgandhi28]

how did you pick the y axis value in renderDotContent?

[ReallyLiri]

 <LineChart
  data={{labels, datasets}}
  renderDotContent={({x, y, index}) => <DotContent key={index} x={x} y={y} value={datasets[0].data[index]}/>}
  ...
</LineChart>

[azuxx]

None of the above worked for me. I am using version 5.6.1 and after many hours of attempts I got the following to work as needed:

import {Svg, Text as TextSVG}                                   from 'react-native-svg';

//LineChart
              //...
              bezier
              style={{
                marginLeft: chartMarginLeft,
                paddingTop: 30
              }}
              renderDotContent={({x, y, index}) => {
                return (
                      <TextSVG
                        key={index}
                        x={x}
                        y={y - 10}
                        fill="black"
                        fontSize="16"
                        fontWeight="normal"
                        textAnchor="middle">
                        {chartDataMock[index]}
                      </TextSVG>
                );
              }}