The React component library ‘Recharts‘ was used to display graphs.
I was displaying a scale on the Y-axis, but only on iOS and Chrome, there was a phenomenon where the Y-axis scale value would disappear at some rendering timing.
I checked the Recharts Issues, but there were no similar issues that had been fixed.
Then, just to be sure, I updated the package to the latest version, but it didn’t make any difference (it’s not in the issues and it hasn’t been fixed, so that’s true…).
Looking at the movement, it seemed likely that it was being pulled by some kind of rendering.
After some investigation, I found out that the YAxis property settings were affecting it.
Because of the design, I had set tickLine:false in YAxis.
Boolean | Object could be specified here, and with Boolean, the library controlled it.
<YAxis
tickLine={false}
stroke="#ADADAD"
tick={{ fontSize: 14 }}
axisLine={{ stroke: "rgba(0, 0, 0, 0.08)" }}
/>https://recharts.org/en-US/api/YAxis
Changing this to display: "none" in the Object specification (CSS) solved the problem.
<YAxis
tickLine={{ display: "none" }}
stroke="#ADADAD"
tick={{ fontSize: 14 }}
axisLine={{ stroke: "rgba(0, 0, 0, 0.08)" }}
/>
