Not sure how to configure this tooltip functionality in react native

Snack I have rendered a chart in rn along with tooltips. Clicking on each individual dot in the chart renders its own separate tooltip component. Currently, the way I have written it down, clicking on Dot 1, all corresponding tooltips get dropped-down at the same time. For instance, if I click on Dot 1, all corresponding tooltip components dropdown-

enter image description here

I want only the first tooltip component to dropdown if I click on Dot 1. Is there any way to accomplish that?

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";
import { useState, useEffect, useCallback, useRef } from "react";
import {
  BarChart,
  Grid,
  PieChart,
  XAxis,
  YAxis,
  LineChart,
  AreaChart,
  ProgressCircle,
} from "react-native-svg-charts";
// You can import from local files
import AssetExample from "./components/AssetExample";
import { Text as TextSvg, Svg, Circle, G, Line, Rect } from "react-native-svg";

// or any pure javascript modules available in npm
import * as shape from "d3-shape";

export default function App() {
  const [tooltipPosx, setTooltipPosx] = useState(false);
  const initialData = [95, 50, 40, 95];
  const [isAreasVisible, setIsAreasVisible] = useState(true);
  const [datas, setDatas] = useState(initialData);
  const verticalContentInset = { top: 10, bottom: 10 };
  const axesSvg = { fontSize: 10, fill: "grey" };
  const xAxisLabels = ["09-10-2020", "10-10-2020", "11-10-2020", "12-10-2020"];
  const CUT_OFF = 1;

  const ChartPoints = ({ x, y, color, data }) => {
    return datas.map((value, index) => (
      <Circle
        key={index}
        cx={x(index)}
        cy={y(value)}
        r={5}
        stroke={color}
        fill="white"
        onPress={() => {
          setTooltipPosx(!tooltipPosx);
          console.log(x(index));
          console.log(y(value));
          console.log(index);
        }}
      />
    ));
  };

  const Tooltips = ({ x, y, data }) => {
    return datas.map((value, index) => (
      <Svg>
        <Rect
          x={x(index)}
          y={value < CUT_OFF ? y(value) - 10 : y(value) + 15}
          width="25"
          height="20"
          fill="black"
        />
        <TextSvg
          key={index}
          x={x(index) + 12}
          y={value < CUT_OFF ? y(value) - 10 + 20 : y(value) + 15 + 12}
          fontSize={8}
          fontWeight="bold"
          fill={value >= CUT_OFF ? "pink" : "white"}
          alignmentBaseline={"middle"}
          textAnchor={"middle"}
        >
          {`${datas[index]}`}
        </TextSvg>
      </Svg>
    ));
  };

  return (
    <View style={[styles.chartView]}>
      <View style={styles.header}>
        <View style={styles.title}>
          <Text>Area Chart</Text>
        </View>
        <View style={styles.icons}>
          <View style={styles.infoIcon}></View>
        </View>
      </View>
      {isAreasVisible && (
        <View>
          <View
            style={{
              height: 250,
              padding: 20,
              width: "90%",
              flexDirection: "row",
              marginTop: "-9%",
            }}
          >
            <YAxis
              data={datas}
              style={{ marginTop: 15 }}
              contentInset={verticalContentInset}
              svg={axesSvg}
            />
            <View style={{ flex: 1, marginLeft: 10 }}>
              <AreaChart
                style={{ height: 200, marginTop: 15 }}
                data={datas}
                contentInset={{ top: 20, bottom: 22, left: 8, right: 7 }}
                curve={shape.curveNatural}
                svg={{ fill: "#ffdab9" }}
              >
                <Grid />
                <ChartPoints color="#98FFFE" />
                {tooltipPosx && <Tooltips />}
              </AreaChart>
              <XAxis
                data={datas}
                formatLabel={(value, index) => xAxisLabels[index]}
                contentInset={{ left: 20, right: 20 }}
                svg={{ fontSize: 8, fill: "#555555" }}
              />
            </View>
          </View>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
  },
}); 


Read more here: https://stackoverflow.com/questions/65714619/not-sure-how-to-configure-this-tooltip-functionality-in-react-native

Content Attribution

This content was originally published by tallpotato at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: