I built a chart using the react-native-chart-kit. I do not want to use any solid data points so I set the setDots={false} so it is just a clean line.
I am trying to create a vertical cursor to track the line values and create a tool tip to show what the values are. I am trying to use the onDataPointClick function but it is not working - I am assuming it must use the dots for that.
Is there anyway to make the capability ?
<LineChart
data={{
datasets: [
{
data: this.state.cryptoChartData,
color: (opacity = 1) =>
`rgba(167, 199, 231, ${opacity})`,
},
],
}}
onDataPointClick={() => {
console.log('clicked');
}}
width={deviceWidth} // from react-native
height={220}
withDots={false}
yAxisLabel="$"
withInnerLines={false}
chartConfig={{
backgroundColor: '#ffffff',
backgroundGradientFrom: '#ffffff',
backgroundGradientTo: '#ffffff',
fillShadowGradient: '#007AFF',
fillShadowGradientOpacity: 1,
decimalPlaces: 0, // optional, defaults to 2dp
color: (opacity = 1) =>
`rgba(0,0,0,${opacity})`,
labelColor: (opacity = 1) =>
`rgba(0,0,0,${opacity})`,
style: {
borderRadius: 1,
},
}}
bezier
getDotPo
style={{
marginVertical: 5,
borderRadius: 16,
}}
/>