SetPointerIndex

[jaikantshikray]

i have searched the github reported issues and documentation as well and find out the initialPointerIndex but even that does not show the tooltip and also does not change the pointer index when different index assigned to intitalPointerIndex

but i have a scenario i need to dynamically show the pointer strip with tooltip in multiline chart so when i press the legend item at top i need to show the pointer on that label (date) dynamically without user need to click on the chart.

i think there should be setPointerIndex callback that can help in this case i am trying to fork the library but want to get help if there is some other way

[Abhinandan-Kushwaha]

Hi @jaikantshikray I am not sure if it is currently achievable using pointers. But it can be done easily using focus.

Here's an example- https://snack.expo.dev/@ak_97/focus-with-external-control?platform=android

Focus.mov

The code for the above chart is-

import {useState} from 'react'
import { Text, View, Pressable, SafeAreaView, StyleSheet } from 'react-native';
import {LineChart} from 'react-native-gifted-charts'

export default function App() {
  const [index,setIndex] = useState(-1)
  const data = [{value:10},{value:14},{value:16},{value:9},{value:12},]
  return (
    <SafeAreaView style={styles.container}>
      <LineChart
        data={data}
        focusEnabled
        showStripOnFocus
        focusedDataPointLabelComponent={(item)=>(<View style={styles.button}><Text>{item.value}</Text></View>)}
        focusedDataPointIndex={index}
      />

      <Text>Press a day to select:</Text>

      <View style={styles.row}>
        <Pressable onPress={()=>setIndex(0)} style={styles.button}>
          <Text>{'Sun'}</Text>
        </Pressable>
        <Pressable onPress={()=>setIndex(1)} style={styles.button}>
          <Text>{'Mon'}</Text>
        </Pressable>
        <Pressable onPress={()=>setIndex(2)} style={styles.button}>
          <Text>{'Tue'}</Text>
        </Pressable>
        <Pressable onPress={()=>setIndex(3)} style={styles.button}>
          <Text>{'Wed'}</Text>
        </Pressable>
        <Pressable onPress={()=>setIndex(4)} style={styles.button}>
          <Text>{'Thu'}</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  button:{backgroundColor:'lightgreen', padding:6, width:44},
  row:{flexDirection:'row', justifyContent:'space-between',marginTop:20}
});

See onFocus and strip related props

[jaikantshikray]

will it work for multiline chart as well where i am showing all focussed points in one tooltip ?

`
0 ? chartData : [{
data: [{ value: 0 }],
color: CARD_COLOR,
dataPointsColor: CARD_COLOR,
hideDataPoints: true,
isAnimated: false,
}]}
thickness={4}
interpolateMissingValues={false}
focusTogether={true}
showPointerStrip
pointerConfig={{
pointerStripColor: 'lightgray',
pointerStripWidth: 1,
pointerColor: '#3C7EB6',
radius: 5,
pointerLabelWidth: 160,
pointerLabelHeight: 60,
activatePointersOnLongPress: true,
autoAdjustPointerLabelPosition: true,
pointerLabelComponent: (items) => {
let toolItems = items && Array.isArray(items) && items.length > 0 ? items.filter(obj => !obj.isNull && obj.value > 0) : [];

              if (toolItems.length > 0) {
                return (
                  <View style={{
                    zIndex: 2000000,
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 10,
                    borderRadius: 8,
                  }}>
                    <Text style={{ color: 'white', fontWeight: 'bold', marginBottom: 4 }}>
                      {toolItems[0].date ? toolItems[0].date : ''}
                    </Text>
                    {toolItems.map((item, index) => {
                      console.log("Tooltip item:", item);
                      if (index < 3) {
                        return (
                          <View key={index} style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 2 }}>
                            <View style={{
                              width: 10,
                              height: 10,
                              backgroundColor: item.color ? item.color : '#37B6F6',
                              marginRight: 6,
                              borderRadius: 5,
                            }} />
                            <Text style={{ color: 'white', fontSize: 12}}>
                              {item.name ? (this.formatLabel(item.name)) : ''}: {item.value ? item.value : ''} {this.state.id === 12 ? (MobxStore.mesurementUnit === 'kg' ? 'kg' : 'lbs') : this.state.id === 14 ? 'kcal' : this.state.id === 27 ? 'ml': ''}
                            </Text>
                          </View>
                        );
                      } else {
                        return null
                      }
                    })}
                    {toolItems.length > 3 ?
                      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 2 }}>
                        <Text style={{ color: 'white', fontSize: 12 }}>
                          {toolItems.length - 3 === 1 ? '+1 more' : ("+" + toolItems.length - 3 + " more")}
                        </Text>
                      </View>
                      : null}
                  </View>
                );
              }
            },
          }}
          curved={true}
          initialSpacing={15}
          endSpacing={15}
          yAxisOffset={0}
          minValue={0}
          noOfSections={this.state.id === 12 ? this.getNoOfSections('weight') : this.state.id === 14 ? this.getNoOfSections("calories") : this.state.multipleMaxValue[this.state.index] > 5 ? 5 : this.state.multipleMaxValue[this.state.index] + 1}
          maxValue={this.state.id === 12 ? this.getAdjustedMaxValue('weight') : this.state.id === 14 ? this.getAdjustedMaxValue("calories") : this.state.multipleMaxValue[this.state.index] > 5 ? this.findMaxAdjusted(this.state.multipleMaxValue[this.state.index]) : this.state.multipleMaxValue[this.state.index] + 1}
          isAnimated={this.state.isAnimated}
          yAxisTextStyle={{
            fontSize: 12,
            color: MobxStore.isDark ? '#D6D6D6' : '#C5C5C7',
            fontFamily: LABEL_FONT_FAMILY,
          }}
          xAxisLabelTextStyle={{
            fontSize: 12,
            minWidth: 20,
            color: MobxStore.isDark ? '#D6D6D6' : '#C5C5C7',
            fontFamily: LABEL_FONT_FAMILY,
          }}
           rulesType="solid"  // Change grid lines to solid
          rulesColor={MobxStore.isDark ? BACKGROUND_COLOR : '#efefef'}  // Customize grid line color
          rulesThickness={1}  // Adjust thickness of the grid lines
          yAxisColor={MobxStore.isDark ? BACKGROUND_COLOR : '#efefef'}
          xAxisColor={MobxStore.isDark ? BACKGROUND_COLOR : '#efefef'}
          areaChart={chartData.length > 0 ? true : false}
          formatYLabel={value => {
            if (value % 1 === 0) { // Only show if it's a whole number
              console.log('format y label', value);
              if (value < 1000) {
                let label = value.toString();
                if (label.includes('.5') || value < 1) {
                  return '';
                } else if (label.includes('.25')) {
                  return Math.floor(label).toString();
                } else if (label.includes('.75') && Math.floor(label) < this.state.max) {
                  return Math.ceil(label).toString();
                } else {
                  let label1 = parseInt(label);
                  return label1.toString();
                }
              } else {
                let label = parseFloat(value / 1000).toFixed(1);
                if (label.includes('.0')) {
                  let label1 = parseInt(label);
                  return label1.toString() + 'k';
                } else {
                  return label.toString() + 'k';
                }
              }
            }
            return ''; // Hide decimal values
          }}
          width={Dimensions.get('window').width - 80}
          height={Dimensions.get('window').height / 4}
        />

`

[jaikantshikray]

also my scenario is i want to show tooltip on bar chart if points on line chart is highlighted and vice versa

[Abhinandan-Kushwaha]

Yes, @jaikantshikray It will work for multi-line charts, and also you can trigger focus on Bar and Line charts together. here's an example- https://snack.expo.dev/@ak_97/focus-with-external-control-multiline?platform=android

focusTogether.mov

The only problem is that each line in the line chart has its own separate tooltip. But you want one single tooltip displaying values of all lines. This is perhaps not achievable if focus is triggered by an external component as is the case here. But, if the focus is triggered by pressing an area inside the chart, then we can use the prop focusTogehter = {false} to focus only one line.

Feel free to raise a PR with this enhancement- single tooltip (or focusedDataPointLabelComponent to be precise) displaying values of all lines. Or I will take this task myself once I get time. Adding it to the todos.

[jaikantshikray]

ok i am trying to fork the lib and if manage to get it done will create PR