[charts] tickerNumber doesn't work along with valueFormatter

[alins-cni]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/test-muix-log-87lwwq

Steps:
Create a LineChart using log scale with property tickNumber on yAxis

export default function LineChartDemo() {
  return (
    <LineChart
      width={500}
      height={300}
      series={[
        {
          data: pData,
          label: "pv",
          yAxisId: "leftAxisId",
        },
        { data: uData, label: "uv", yAxisId: "leftAxisId" },
      ]}
      xAxis={[{ scaleType: "point", data: xLabels }]}
      yAxis={[
        {
          id: "leftAxisId",
          scaleType: "log",
          tickNumber: 4,
        },
      ]}
    />
  );
}

Then add a valueFormatter function in yAxis

export default function LineChartDemo() {
  return (
    <LineChart
      width={500}
      height={300}
      series={[
        {
          data: pData,
          label: "pv",
          yAxisId: "leftAxisId",
        },
        { data: uData, label: "uv", yAxisId: "leftAxisId" },
      ]}
      xAxis={[{ scaleType: "point", data: xLabels }]}
      yAxis={[
        {
          id: "leftAxisId",
          scaleType: "log",
          tickNumber: 4,
          valueFormatter: (v) => v //this will invalidate tickNumber
        },
      ]}
    />
  );
}

Current behavior

When the yAxis.valueFormatter property is added, the tickNumber no longer works.

Expected behavior

The property tickNumber shouldn't be affected by valueFormatter function.

Context

I am trying to change the format of tick values on yAxis, example: convert 300,000 to 300k. However, the default formatter from MUIX doesn't do that. Then I use the property valueFormatter function to fix that. However this causes another issue: The number of ticks increases and the yAxis has too many values that is hard to see. I tried to fix it using the property tickNumber but it doesn't work along with valueFormatter.

Your environment

npx @mui/envinfo

System:
    OS: macOS 14.6
  Binaries:
    Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
    pnpm: 9.11.0 - ~/.nvm/versions/node/v18.20.4/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.267
    Edge: Not Found
    Safari: 17.6

Search keywords: valueFormatter, log, tickNumber

Order ID: 98924

[michelengelen]

@JCQuintas it does seem that the bug is valid. Although it also seems that the tickerNumber prop is not giving the results I would expect even without a valueFormatter. The number of ticks is always x+1, which kind of makes sense, since you want the highest and lowest value to show. But this prevents scenarios where you would want only he high/low value to show.

[JCQuintas]

The tickNumber property cannot be guaranteed. The value is approximate.

You can also notice the tickNumber doesn't work at all. The ticks are still there, just their labels are missing. This happens because the internal "valueFormatter" smartly guesses which ticks should be shown on a log scale.

It also doesn't work for any scale expect linear/date/utc. @alexfauquette should we document that tickNumber doesn't work for these axis?

[alexfauquette]

Yeah, probably the tick position docs might benefit from an additional section explaining that band and point display all their ticks. Something we might need to reconsider one day, but for now I don't have better alternative