activate pointer from outside the chart #383
-
i need to show the pointer on the chart from out outside label once click on the i tried but did found any solution ![]() |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
Hi @AkramSyed002 👋 This can be achieved using the Here is an example- The code for the above chart is- const App = () => {
const [lineData, setLineData] = useState([
{value: 0},
{value: 10},
{value: 8},
{value: 58},
{value: 56},
{value: 78},
{value: 74},
{value: 98},
]);
const days = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon']
const showOrHidePointer = (ind, show) => {
setLineData(
lineData.map((item, index) => {
if (index === ind) {
item.dataPointRadius = show ? 8 : 0;
item.showVerticalLine = show
}
return item;
}),
);
};
return (
<View>
<View style={{flexDirection: 'row', marginLeft: 8}}>
{lineData.map((item, index) => {
return (
<TouchableOpacity
key={index}
style={{
padding: 6,
margin: 4,
backgroundColor: '#ebb',
borderRadius: 8,
}}
onPressIn={() => showOrHidePointer(index, true)}
onPressOut={() => showOrHidePointer(index, false)}>
<Text>{days[index]}</Text>
</TouchableOpacity>
);
})}
</View>
<LineChart
data={lineData}
curved
dataPointsRadius={0}
dataPointsColor='#f88'
verticalLinesColor={'#f88'}
initialSpacing={0}
spacing={45}
/>
</View>
);
} |
Beta Was this translation helpful? Give feedback.
-
@AkramSyed002 Please consider using the latest version of the library i.e. |
Beta Was this translation helpful? Give feedback.
Hi @AkramSyed002 👋
Thanks for bringing this out. I don't think this is currently supported, but I can suggest you a workaround.
This can be achieved using the
dataPointRadius
andshowVerticalLine
properties inside data items, and usingonPressIn
andonPressOut
with your external touchable component.Here is an example-
The code for the above chart is-