wuba / react-native-echarts

📈 React Native ECharts Library: An awesome charting library for React Native, built upon Apache ECharts and leveraging react-native-svg and react-native-skia. Offers significantly better performance compared to WebView-based solutions.
https://wuba.github.io/react-native-echarts/
Apache License 2.0
755 stars 25 forks source link

MarkLine silent true still triggers tooltip #104

Closed RafaelCENG closed 1 year ago

RafaelCENG commented 1 year ago

Based on the docs. silent = true should disable the mouse events. Whether to ignore mouse events. The default value is false, for triggering and responding to mouse events. Because I have a custom tooltip formatter if I touch the markLines im getting ERROR TypeError: undefined is not a function, js engine: hermes

Here is the needed code

      tooltip: {
        trigger: "item",
        formatter: function (params) {
          return params.dataIndex === 0
            ? `${rangeLow.format("DD")}-${rangeLow.add(firstWeek.length-1, "day").format("DD MMM")} \n ${params.value.toFixed(1)}%` //prettier-ignore
            : params.dataIndex === 52
            ? `${rangeHigh.subtract(lastWeek.length-1, "day").format("DD")}-${rangeHigh.format("DD MMM")} \n ${params.value.toFixed(1)}%` //prettier-ignore
            : `${newRangeLow.add(params.dataIndex-1, "week").format("DD")}-${newRangeLow.add(params.dataIndex-1,"week").add(6,'day').format("DD MMM")} \n ${params.value.toFixed(1)}%` //prettier-ignore
        },
        confine: true,
      },
      xAxis: [
        {
          type: "category",
          data: Object.keys(resultObject),
          show: false,
        },
        {
          position: "bottom",
          type: "category",
          data: categories.map((category) => category.charAt(0)),
          xAxisIndex: 2,
          show: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      yAxis: {
        show: false,
        type: "value",
      },
      series: [
        {
          data: Object.values(resultObject),
          type: "bar",
          itemStyle: {
            color: (seriesIndex) =>
              seriesIndex.dataIndex > 39 ? "#FF5630" : "#A19D9A",
          },
          markLine: {
            data: [
              // case A
              {
                silent: true,
                yAxis: yearlyAverage.toFixed(0),
                symbol: ["none", "none"],
                label: {
                  position: "insideStartTop",
                },
              },
              {
                silent: true,
                yAxis: last13WeeksAverage.toFixed(0),
                // symbol: ["none", "none"],
                label: {
                  position: "insideEndTop",
                },
              },
            ],
          },

Also a small demonstration with a video. First I touch on the white bars, then I touch the markLine

https://github.com/wuba/react-native-echarts/assets/45431116/66f43c2c-07ca-430e-b3e1-33a54d9b7775

P.S : symbol: ["none","none"] should removed both arrow and circle but doesnt. If i use one "none" only the circle gets removed.

iambool commented 1 year ago

If you expect MarkLine not to respond to mouse events, you need to set silent in the markline configuration, not in the data. The same goes for symbol: markLine: { silent: true, symbol: ["none","none"], data: [ // ... for data ] }

RafaelCENG commented 1 year ago

Thank you. Rookie mistakes even after 5-7 graphs ahah.