How to use parameter other than x and y in useChartPressState

[vishal957132]

Below is my code

const data = [
    {
      x: "S",
      val: 1,
      date: "19-05-2024",
    },
    {
      x: "M",
      val: 2,
      date: "20-05-2024",
    },
    {
      x: "T",
      val: 6,
      date: "21-05-2024",
    },
    {
      x: "W",
      val: 3,
      date: "22-04-2024",
    },
    {
      x: "T",
      val: 7,
      date: "23-03-2024",
    },
    {
      x: "F",
      val: 5,
      date: "24-05-2024",
    },
    {
      x: "S",
      val: 4,
      date: "25-05-2024",
    },
  ];

const Annotation = ({
    x,
    y,
    val,
    chartHeight,
    chartWidth,
    dateVal
  }: {
    x: SharedValue<number>;
    y: SharedValue<number>;
    val: SharedValue<number>;
    chartHeight: number;
    chartWidth: number;
    dateVal: SharedValue<string>;
  }) => {
return();
}
  
  return(
<CartesianChart
            data={data}
            xKey="x"
            yKeys={["val"]}
            padding={wp(10)}
            domainPadding={{ left: wp(10), right: wp(10), top: wp(2) }}
            domain={{ y: [0, 7] }}
            axisOptions={{
              font: useFont(EmojiFont, 16),
              tickCount: 7,
              lineColor: {
                grid: { x: "#d4d4d8", y: "#A5A9A9" },
                frame: "#d4d4d8",
              },
              labelColor: "#121723",
              formatYLabel(label): string {
                let labelVal = "";
                if (label > 0 && label < 8) {
                  labelVal = smileys[label - 1];
                }
                return labelVal;
              },
            }}
            chartPressState={state}
            renderOutside={(item) =>
              isActive && (
                <Annotation
                  x={state.x.position}
                  y={state.y.val.position}
                  val={state.y.val.value}
                  chartHeight={item.canvasSize.height}
                  chartWidth={item.canvasSize.width}
                  dateVal={state.x.value}
                />
              )
            }
          >
            {({ points }) =>
              points.val.map((item: any) => {
                return (
                  <Image
                    key={String(item.x)}
                    image={item?.yValue > 3 ? blueDotImage : redDotImage}
                    fit="contain"
                    x={item.x - wp(3)}
                    y={item?.y - wp(2)}
                    width={wp(6)}
                    height={wp(6)}
                  />
                );
              })
            }
          </CartesianChart>
);

My question is how to pass date parameter to Annotation function. Right now passing dateVal={state.x.value} i.e. value of x. When I console inside Annotation function it gives me "S", "M" kind of result. But i want date

[zibs]

Hey @vishal957132, this should be possible I believe.

I think you'll want to add another item to your yKeys array, as well as add the same value to your useChartPressState ie.

From the example getting started in the example app:

const { state, isActive } = useChartPressState({
    x: 0,
    y: { highTmp: 0, date: 0 }, // I added the `date` value here
  });

and in the chart

yKeys={["highTmp", "date"]}

and then in the tooltip I was able to do

{isActive && (
                <>
                  <ToolTip
                    x={state.x.position}
                    y={state.y.highTmp.position}
                  />
                  <Text 
                    font={font}
                    text={state.y.date.position.value.toString()}
                    x={state.x.position}
                    y={state.y.highTmp.position}
                  ></Text>
                </>
              )}

Hope this gives you an idea and an approach!

[vishal957132]

Hello @zibs , it worked for me thanks man.