Visual of graph breaks when changing from having data to none

[RafaelCENG]

Screen.Recording.2023-09-21.at.11.49.02.AM.mov

  if (TTBikeRef.current) {
      chart = echarts.init(TTBikeRef.current, "light", {
        renderer: "svg",
        width: E_WIDTH * 0.9,
        height: E_HEIGHT * customHeight,
      });
      chart.setOption(option);

My custom height will change depending of how many positions i have. (This happens to solve my legend vertical problem)

The problem is when I change graphs for example from Road to TT if i have data on Road my TT will be weird. See the video to understand it better. Thanks in advance

[yechunxi]

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

[RafaelCENG]

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.

[yechunxi]

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.

[RafaelCENG]

@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.

[RafaelCENG]

  // 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.

[RafaelCENG]

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

[RafaelCENG]

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

[yechunxi]

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.

[RafaelCENG]

Sure I will try to create the reproduction later.

[RafaelCENG]

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.

[RafaelCENG]

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.

[yechunxi]

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

[RafaelCENG]

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.

Screen.Recording.2023-10-12.at.10.16.09.AM.mov