[charts] Failed prop type: The prop bars[0].xOrigin is marked as required in BarLabelPlot

[prolink007]

Steps to reproduce

Using chrome 125.0.6422.142.

1. Use the stackblitz from the BarChart documentation.

2. Add this following code snippet to the BarChart component.

barLabel={(item, context) => {
  return ""
}}

3. Refresh the code and inspect the page. Notice the error in the console.

preview-b991ddc586eca.js:2 Warning: Failed prop type: The prop `bars[0].xOrigin` is marked as required in `BarLabelPlot`, but its value is `undefined`.
    at BarLabelPlot (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/BarChart/BarLabel/BarLabelPlot.js:53:7)
    at BarPlot (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/BarChart/BarPlot.js:195:7)
    at g
    at svg
    at eval (https://tsf5u6--run.stackblitz.io/turbo_modules/@emotion/[email protected]/dist/emotion-element-f93e57b0.cjs.dev.js:62:23)
    at ChartsSurface (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/ChartsSurface.js:24:7)
    at HighlightedProvider (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/context/HighlightedProvider/HighlightedProvider.js:34:3)
    at InteractionProvider (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/context/InteractionProvider.js:68:5)
    at ZAxisContextProvider (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/context/ZAxisContextProvider.js:25:12)
    at CartesianContextProvider (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/context/CartesianContextProvider.js:35:12)
    at SeriesContextProvider (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/context/SeriesContextProvider.js:66:5)
    at ColorProvider (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/context/ColorProvider.js:18:5)
    at DrawingProvider (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/context/DrawingProvider.js:44:5)
    at ChartContainer (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/ChartContainer/ChartContainer.js:26:5)
    at div
    at eval (https://tsf5u6--run.stackblitz.io/turbo_modules/@emotion/[email protected]/dist/emotion-element-f93e57b0.cjs.dev.js:62:23)
    at ResponsiveChartContainer (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/ResponsiveChartContainer/ResponsiveChartContainer.js:21:14)
    at BarChart (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/BarChart/BarChart.js:39:5)
    at BarsDataset
    at StyledEngineProvider (https://tsf5u6--run.stackblitz.io/turbo_modules/@mui/[email protected]/node/StyledEngineProvider/StyledEngineProvider.js:27:5)

Current behavior

When adding a barLabel to a BarChart you get the following error.

Warning: Failed prop type: The prop `bars[0].xOrigin` is marked as required in `BarLabelPlot`, but its value is `undefined`.

Expected behavior

I would expect no error.

Context

Trying to add a barLabel to a BarChart without an error in the console.

Your environment

npx @mui/envinfo

System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.14.0 - ~\AppData\Local\fnm_multishells\14264_1718114663323\node.EXE
    npm: 10.7.0 - ~\AppData\Local\fnm_multishells\14264_1718114663323\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.142
    Edge: Chromium (125.0.2535.92)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.5 => 11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.19
    @mui/icons-material: ^5.15.18 => 5.15.19
    @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170
    @mui/material: ^5.15.18 => 5.15.19
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-charts: ^7.6.2 => 7.6.2
    @mui/x-data-grid: ^7.6.2 => 7.6.2
    @mui/x-date-pickers: ^7.6.2 => 7.6.2
    @types/react:  18.3.3
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript:  4.9.5

Search keywords: barchart

[michelengelen]

Hey @prolink007 ... thanks for raising this issue. 🙇🏼
I can confirm it and will add this to the board!

[michelengelen]

For some reason the scale function here will always return undefined when called with 0.

@JCQuintas could you take this?

[alexfauquette]

The solution is in the BarPlot component code:

https://github.com/mui/mui-x/blob/master/packages/x-charts/src/BarChart/BarPlot.tsx/#L194-L208

The following code can not work because the x-axis is a band scale by default. So it can only accept values in the data property. But the y-axis is a numerical value which can always accept 0

xOrigin: xScale(0)!,
yOrigin: yScale(0)!,

We need to adapt the typing

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@prolink007: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.