RechatsライブラリでiOSとChromeの時にY軸が表示されなくなった。

Reactコンポーネントライブラリの「Recharts」を使ってグラフ表示をしていた。

Y軸に目盛りを表示していたが、iOSとChromeの組み合わせだけ、なんらかのレンダリングのタイミングでY軸の目盛り値が消えてしまう現象にあった。

RechartsのIssuesをみてみるが、似たようものでfixされたものはなかった。
そのうえで念の為、パッケージを最新にアップデートしてみるも、変わらなかった(issueで出てないし修正されてないからそれはそう。)

動きを見ていると、なんらかのレンダリングに引っ張られている可能性が高そうだった。

いろいろと調査していくと、YAxisのプロパティ設定が影響していることを突き止める。

デザインの関係で、YAxisのtickLine:falseを設定していた。
ここにはBoolean | Objectを指定でき、Booleanではライブラリ側で制御してくれていた。

  <YAxis
    tickLine={false}
    stroke="#ADADAD"
    tick={{ fontSize: 14 }}
    axisLine={{ stroke: "rgba(0, 0, 0, 0.08)" }}
  />

https://recharts.org/en-US/api/YAxis

ここをObject指定(CSS)で、display: "none"に変更すると、無事解決した。

  <YAxis
    tickLine={{ display: "none" }}
    stroke="#ADADAD"
    tick={{ fontSize: 14 }}
    axisLine={{ stroke: "rgba(0, 0, 0, 0.08)" }}
  />
よかったらシェアしてね!
目次