[charts] Pie chart loading text not localizable

[damiangreen]

Steps to reproduce

  const xScale = useXScale();
  const yScale = useYScale();
  const { left, width, height } = useDrawingArea();

  const bandWidth = xScale.bandwidth();

  const [bottom, top] = yScale.range();

  return (
    <g>
      {xScale.domain().map((item, index) => {
        const ratio = ratios[index % ratios.length];
        const barHeight = ratio * (bottom - top);

        return (
          <LoadingRect
            key={index}
            x={xScale(item)}
            width={bandWidth}
            y={bottom - barHeight}
            height={height}
          />
        );
      })}
      <LoadingText x={left + width / 2} y={top + height / 2}>
        Loading data ...
      </LoadingText>
    </g>
  );
}

Current behavior

Loading data.. is not localisable. hard coded in

Expected behavior

should be localisable

Context

No response

Your environment

npx @mui/envinfo

 System:
    OS: Linux 6.11 Ubuntu 24.10 24.10 (Oracular Oriole)
  Binaries:
    Node: 20.16.0 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm
    pnpm: 9.15.5 - /usr/local/bin/pnpm
  Browsers:
    Chrome: Not Found

~$ 

Search keywords: Loading Data...

[michelengelen]

Thanks for raising this @damiangreen ... i've added it to the board for the team to have a look! 👍🏼

[alexfauquette]

You can customize this message with slotsProps https://mui.com/x/react-charts/styling/#custom-overlay

The hardcoded one was just for demo purpose