activate pointer from outside the chart

[AkramSyed002]

i need to show the pointer on the chart from out outside label once click on the i tried but did found any solution
is there any way to do like this SS attached

[Abhinandan-Kushwaha]

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 and showVerticalLine properties inside data items, and using onPressIn and onPressOut with your external touchable component.

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>
  );
}

[Abhinandan-Kushwaha]

@AkramSyed002 Please consider using the latest version of the library i.e. 1.3.6
It has some minor fixes you might need.