Search code examples
reactjsrecharts

Use Scientific Notation Recharts Y-Axis Scale


My chart's y-axis is in scientific notation except for 1 tick only .. is it possible to adjust this in recharts? In particular the tick right before '1'. My data's range is from 1e-100 until 1. I tried setting my own ticks but, for example 1e-1 gets displayed as 0.1.

                  <YAxis
                label=
                {{
                  value: "Collision Probability / -",
                  position: "insideLeft",
                  angle: -90,
                  dx: -3,
                  fill: "#808080",
                  dy: 70,
                  fontSize: "105%"
                }}
                scale="log"
                //@ts-ignore
                domain={['auto', '1']}
                type="number"
                dataKey="probability">
              </YAxis>

Solution

  • I managed to solve it.

                      <YAxis
                    label=
                    {{
                      value: "Collision Probability / -",
                      position: "insideLeft",
                      angle: -90,
                      dx: -3,
                      fill: "#808080",
                      dy: 70,
                      fontSize: "105%"
                    }}
                    scale="log"
                    //@ts-ignore
                    domain={domain.y}
                    type="number"
                    tickFormatter={(value) => Number(value.toFixed(10)).toExponential()}
                    dataKey="probability">
                  </YAxis>