Visual of graph breaks when changing from having data to none about react-native-echarts HOT 13 CLOSED

When there is no data, the Y-axis has no value to display, but we can set the maximum and minimum values ​​to ensure that the y-axis has a value to display. Of course, the maximum value cannot be known, and you can also write a function to handle it, mainly to ensure The legend can be displayed when there is no value. such as this below shown:

 yAxis: {
    type: 'value',
    min:0,
    axisLabel: {
        formatter: '{value}%'
      },
    max: function (value) {
      if(!value.max) return 100;
      return value.max + 30;
    },
},

I don’t know if this can solve your problem, you can try it

from react-native-echarts.

Thanks for the response I will check it out. I do not want to show either the y-axis or the legend when I have no data.

from react-native-echarts.

Thanks for the response I will check it out. I do not want to show either the y-axis or the legend when I have no data.

I misunderstood. I thought you wanted the legend or y-axis to be displayed regardless of whether there is data. If your problem still cannot be solved or you would like us to provide support, You can describe it in more detail so it's easier to find a suitable solution.

from react-native-echarts.

@yechunxi Thanks you can see whats happening in the video. Probably I will post more of the code in the next few days. Thanks for the response.

from react-native-echarts.

  // CHART RELATED
  const RoadBikeRef = useRef<any>(null);
  useEffect(() => {
    const ROAD_BIKE_OPTIONS = {
      title: {
        show: chartSeries.length === 0,
        textStyle: {
          color: "#F7F3F0",
          fontSize: 20,
        },
        text: "No data available",
        left: "center",
        top: "20%",
      },
      grid: {
        right: "2%",
        // y2: 300,
        height: E_HEIGHT * 0.35,
      },
      tooltip: {
        show: chartSeries.length !== 0,
        trigger: "axis",
        textStyle: {
          color: "#F7F3F0",
        },
        backgroundColor: "rgba(61, 52, 62, 0.9)",
        valueFormatter: function (val) {
          return `${val} %`;
        },
        confine: true,
      },
      legend: {
        data: chartSeries.map((series) => series.name),
        icon: "circle",
        inactiveColor: "#64605D",
        textStyle: {
          color: "#F7F3F0",
        },
        orient: "vertical",
        bottom: 0,
        left: 0,
        // top: "bottom",
        // top: -20,
        //Paei to legend apo kato. Iparxi overlap provlima (na to kitakso)
      },
      xAxis: {
        type: "category",
        data:
          currentPeriod === "4 Weeks"
            ? Object.keys(week_buckets).reduce((arr, key) => {
                return arr.concat(key, "", "", "", "", "", "");
              }, [])
            : categories,

        axisLabel: {
          interval: 0,
        },
        axisTick: {
          alignWithLabel: true,
        },
      },
      yAxis: {
        type: "value",
        min: 0,
        axisLabel: {
          formatter: (val) => Math.ceil(val) + "%",
        },
      },
      series: chartSeries.map((series) => ({
        name: series.name,
        type: "line",
        smooth: true,
        data: series.data,
        symbol: "circle",
        lineStyle: {
          type: series.name.includes("Not") ? "dashed" : "solid",
        },
      })),
    };
    let chart: any;
    if (RoadBikeRef.current) {
      chart = echarts.init(RoadBikeRef.current, "light", {
        renderer: "svg",
        width: E_WIDTH * 0.9,
        height: E_HEIGHT * customHeight,
      });
      chart.setOption(ROAD_BIKE_OPTIONS);
    }
    return () => chart?.dispose();
  }, [chartSeries]);

I have one more when changing to TT bike. So whats happening if I have data on my chartSeries road_bike
and I change to TT_bike where my chartSeries and graph will be recalculated and I have no data. My first graph is looking like its compressed.

from react-native-echarts.

Any updates about this one? Currently the only problem we are having with our mobile graphs.

from react-native-echarts.

Bump. Any news? We are almost in time for publishing our app and graphs are one of the main parts.

from react-native-echarts.

I can't reproduced this problem. Can you provide a demo of the reproduction? I see that the x-axis of the chart in your code is variable, but it is not included in the useEffect dependency.

from react-native-echarts.

Sure I will try to create the reproduction later.

from react-native-echarts.

Unfortunately, I tried to create a reproduction but is so hard because we are using some custom functions, etc. I will try to explain it as well as possible.
In the first screenshot, I'm using the data that is coming from my chartSeries. As you can see everything is perfect.

Now I will press my button to change the dates. As you can see my chartSeries is an empty array as expected. Showing that no data is available. The only problem looks like it is smashed. Now I will press one more time my button to go to the next month

Here is the last time I pressed the button. ChartSeries is an empty array again as expected. As you can see in my final screenshot this is how no data available should be.

So what I found is when I change from having data to none the first time looks like smashed.
Hope I explained it well. I'm sorry for not being able to create a reproduction.
X-axis has no problem. Doesn't need to be included in my dependency.

from react-native-echarts.

After some debugging I found the problem is happening because of the chart height

As you see in my code above for my height im using my device height multiply by a custom height

  const customHeight: number = useMemo(() => {
    return bikePositions.length === 0
      ? 0.5
      : 0.5 + bikePositions.length * 0.023;
  }, [bikePositions]);

So if my custom height is 0.6(when I have data) and goes 0.5(zero data) we can see the smashed chart.

from react-native-echarts.

Now that you have found the cause of the problem, you can deal with the chart height issue according to the business, so I will close this issue

from react-native-echarts.

I'm sorry I will comment once again. I followed the doc adaptive-size(seems new guide)
I added a state first

  const [customHeight, setCustomHeight] = useState<number>(0);

Then I created a useEffect that updates that state based on my bikePositions

  useEffect(() => {
    const newHeight =
      bikePositions.length === 0
        ? 0.5 * E_HEIGHT
        : (0.5 + bikePositions.length * 0.023) * E_HEIGHT;
    setCustomHeight(newHeight);
  }, [bikePositions]);

Lastly I added an extra useRef to resize my graph

  useEffect(() => {
  chartRef.current.resize({
    width: E_WIDTH * 0.9,
    height: customHeight,
  });
}, [customHeight]);

The only problem I have (video below) is the flickering (probably double render). Sorry for commenting once again. Thanks for the help in Advance.

from react-native-echarts.