BarChart: onPress for Navigation

[marcuszierke]

Hi guys,

I was wondering if theres is a functionality implemented yet that allows you to click e.g. on a bar in a BarChart diagram which will send you to another page or open a modal etc.!? If not is it a planned feature?

[danishbutt3535]

Did you find any solution?

[danishbutt3535]

I resolve this issue by adding onPress on Rect, you have to Copy BarChart class code into your class and customize it.

` renderBars = ({
    data,
    labels,
    width,
    height,
    paddingTop,
    paddingRight,
    barRadius,
    withCustomBarColorFromData,
    navigation
  }: Pick<
    Omit<AbstractChartConfig, "data">,
    "width" | "height" | "paddingRight" | "paddingTop" | "barRadius"> & {
    data: number[];
    labels:string[],
    withCustomBarColorFromData: boolean;
    navigation:any
  }) => {
    const baseHeight = this.calcBaseHeight(data, height);
  return data.map((x, i) => {
      const barHeight = this.calcHeight(x, data, height);
      const barWidth = 32 * this.getBarPercentage();
      return (

          <Rect
            onPress={() =>{
              navigation.navigate("listpage")
            }

          }
            key={Math.random()}
            x={
              paddingRight +
              (i * (width - paddingRight)) / data.length +
              barWidth / 2
            }
            y={
              ((barHeight > 0 ? baseHeight - barHeight : baseHeight) / 4) * 3 +
              paddingTop
            }
            rx={barRadius}
            width={barWidth}
            height={(Math.abs(barHeight) / 4) * 3}
            fill={
              withCustomBarColorFromData
                ? `url(#customColor_0_${i})`
                : "url(#fillShadowGradient)"
            }
          >

          </Rect>

      );
    });
  };`

[quicksilverr]

Hey, could we also add a callback for this and then import any kind of function in there?

[quicksilverr]

@danishbutt3535 Thanks for referencing this issue. But how do we show the tooltip for each bargraph?

[danishbutt3535]

I don't work on tooltip but you can show popup on pressing bars like in LineChart, you can get x and y position on pressing bars and show popup w.r.t x and y position.

[quicksilverr]

Hey, thanks. Yeah, I was also thinking on the same lines. Do you have any code snippet you could share?

[quicksilverr]

Until it's added as a functionality to this package - we can use this for now -> https://www.npmjs.com/package/react-native-chart-kit-with-pressable-bar-graph

[yasinosman]

(2024) +