Where should I listen for my events?

[RafaelCENG]

Im trying to listen when a user press on my pie charts. When he press I want to take the value and label and show it somewhere else in a specific container.

This is the event I found from the docs. Inside paramas I found both name,value.
chart.on("click", function (params) { console.log(params); });

My problem is where should I call this?
Should I create a useEffect that takes as dependency my chart?

This is what I tried but its 100% wrong and breaks the app too.

  useEffect(() => {
  
    const PieOptions = {
      series: [
        {
          name: "Positions",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 15,
              fontWeight: "bold",
              color: "inherit",
            },
          },
          labelLine: {
            show: false,
          },
          data: pieData,
          color: pieChartColors,
        },
      ],
    };
    let chart: any;
    if (pieRef.current) {
      chart = echarts.init(pieRef.current, "light", {
        renderer: "svg",
        width: 250,
        height: 250,
      });
      chart.setOption(PieOptions);
      chart.on("click", function (params) {
        console.log(params);
      });
    }
    return () => chart?.dispose();
  }, []);

[RafaelCENG]

Also are better docs with more examples under construction?

[iambool]

hey bro, what about this?
https://github.com/wuba/taro-playground/blob/main/src/pages/explore/charts/pages/dataset/DatasetLink.tsx

[RafaelCENG]

Sorry for the late response. This is different from the examples we have in the docs. There is no ref,chart.dispose etc. Should i go with that method?

[zhiqingchen]

Do you mean the official website example, like this one?

https://wuba.github.io/react-native-echarts/docs/getting-started/write-a-simple-line-chart

[RafaelCENG]

Yes. That's how we create all our charts.

[zhiqingchen]

https://apache.github.io/echarts-handbook/en/concepts/event/

example code:

function SvgComponent({ option }: any) {
  const [value, setValue] = React.useState(0);
  const svgRef = useRef<any>(null);

  useEffect(() => {
    let chart: any;
    if (svgRef.current) {
      // @ts-ignore
      chart = echarts.init(svgRef.current, 'light', {
        renderer: 'svg',
        width: E_WIDTH,
        height: E_HEIGHT,
      });
      chart.setOption(option);
      chart.on('click', function (params: any) {
        setValue(params.value);
      });
    }
    return () => chart?.dispose();
  }, [option]);

  return (
    <>
      <Text>{value}</Text>
      <SvgChart ref={svgRef} useRNGH />
    </>
  );
}

[RafaelCENG]

Sorry for the delay response. When I use the chart.on click my app stops working after.

[RafaelCENG]

Also how can we put the legend below the graph?

Legend currently has left and bottom 0.

[RafaelCENG]

Here is my latest code I commented out my chart.on("click")
What I found is when I click my chart (tap) is delayed and also everything stop working. (buttons,navs etc) my app freezes in other words. Also my setOption doesn't work for the title maybe I do something wrong there. I do not use useRNGH on my Skiachart.
What we actually need is to create something like a collapsible graph. I have some setting on the chart and when the user taps it I want to change some settings, like adding tooltip,height etc.

const speedOptions = {
    title: {
      text: "Speed",
      textStyle: {
        color: "#FFFFFF",
      },
    },
    xAxis: {
      type: "category",
      data: categories,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
      },
    },
    yAxis: {
      show: false,
    },
    series: {
      name: "Speed",
      type: "line",
      smooth: true,
      data: speedData,
      lineStyle: { color: "#BC6D29", width: 3 },
      itemStyle: { color: "#BC6D29" },
      symbol: "circle",
      symbolSize: 7,
    },
  };
  useEffect(() => {
    let chart: any;
    if (speedRef.current) {
      chart = echarts.init(speedRef.current, "light", {
        renderer: "svg",
        width: E_WIDTH * 0.95,
        height: E_HEIGHT * 0.1,
      });
      chart.setOption(speedOptions);
      // chart.on("click", function (params: any) {
      //   console.log({ params });
      //   console.log(params);
      //   chart.setOption({
      //     title: {
      //       text: "CLICKED",
      //       textStyle: {
      //         color: "#FFFFFF",
      //       },
      //     },
      //   });
      // });
    }
    return () => chart?.dispose();
  }, [chartSeries]);````

[zhiqingchen]

don't console.log(params);, it's too large.
just use the data you need like setValue(params.value);

[RafaelCENG]

Hmm I believe it needs a double tap to work.

[RafaelCENG]

Also how could I change the height when clicked?

 chart = echarts.init(speedRef.current, "light", {
        renderer: "svg",
        width: E_WIDTH * 0.95,
        height: E_HEIGHT * 0.1,
      });

[RafaelCENG]

Found the height by using reSize.

   chart.resize({
          width: 800,
          height: 400,
        });

My only problem now its the delay when pressing the chart.

[zhiqingchen]

Need to organize all the code and I will test it

[RafaelCENG]

Perfect thanks here is a small preview. Im tapping multiple times in some cases nothing happens
Also, you can see a small fade when changing graphs

Screen.Recording.2023-08-01.at.12.16.48.PM.mov

[RafaelCENG]

After some time. I managed to do it in another way but I want to ask if performance-wise is okay.

useEffect(() => {
    console.log({ expanded });
    let chart: any;
   const notExpandedOptions = {...}
   const expandedOptions = {...}
  if (speedRef.current) {
      chart = echarts.init(speedRef.current, "light", {
        renderer: "svg",
        width: E_WIDTH * 0.9,
        height: expanded ? E_HEIGHT * 0.4 : E_HEIGHT * 0.1,
      });
      expanded
        ? chart.setOption(expandedOptions)
        : chart.setOption(speedOptions);


    return () => chart?.dispose();
  }, [chartSeries, expanded]);

Whenever I press my button based on the state of my expanded state I give different options.

[zhiqingchen]

save chart instance as a ref. do setoption on ref.current when expanded change.

[zhiqingchen]

keep a single chart instance if it's a same chart.

[RafaelCENG]

Thats what i did at the start but i was getting the instance warning and everything was broken. Now because we dont use the click action but a button with this setup everything is perfect.

[RafaelCENG]

Screen.Recording.2023-08-03.at.9.33.01.AM.mov

Here is a small demostration what I managed to do with the two different options.