[charts] Pie chart tooltip runtime warning

[ledevinchi]

Steps to reproduce

Hi,
i'm using MUI-Charts pie chart.
on runtime, when the tooltip is active (hovering above the chart) i get a warning:

Warning: Failed prop type: Invalid prop 'series.data[0]' of type 'object' supplied to 'DefaultChartsItemTooltipContent', expected 'number'.

here is part of my code:
<PieChart series={[ { data: testData, valueFormatter(item) { return '$' + item.value.toFixed(2); }, }, ]} slotProps={{ legend: { hidden: true } }} width={400} height={200} />

the testData is {id: number, label: string, value: number, color: string}, no nulls.

by trying to fix the problem i changed the testData to be an array of number, but then i get a syntax error.
i read the documentation and didn't find anything to fix it.

THE CODE IS WORKING but i can't get rid of the warning.
any ideas?

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: tooltip runtime warning

[michelengelen]

Hi @ledevinchi,

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷.

A live example would be perfect. This codesandbox.io template may be a good starting point. You can find more codesandbox templates in our docs.

Thank you! 🙇🏼

[alexfauquette]

For a reason I ignore the Proptypes generated have a series with data as an array of number, but type can be pie. Still need to investigate to see if it's a TS error or if the proptypes generator has an issue

series: PropTypes.shape({
    color: PropTypes.string,
    data: PropTypes.arrayOf(PropTypes.number).isRequired,
    highlightScope: PropTypes.shape({
      faded: PropTypes.oneOf(['global', 'none', 'series']),
      highlighted: PropTypes.oneOf(['item', 'none', 'series']),
    }),
    id: PropTypes.string.isRequired,
    type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired,
    valueFormatter: PropTypes.func.isRequired,
  }).isRequired,

[ledevinchi]

Hi,
the 'data' type @alexfauquette showed is different then what i get in my code.
i get (property) data: MakeOptional<PieValueType, "id">[]
instead of
data: PropTypes.arrayOf(PropTypes.number).isRequired,.

forgot to mention i'm using next v13.5.6 (Typescript)
charts v6.18.7
mui/material v5.15.4

[alexfauquette]

@ledevinchi Yes, The typing seems ok. We have a script that generate proptypes to avoid maintaining TS and Proptypes. But seems it does not support well nested unions.

I reproduced the error in a test. Will see if I succeed to make it pass 😁
mui/material-ui#40617

A quick solution could be to remove those proptypes for now to avoid having a useless error message 🤔

[michaldudak]

A just-as-quick and more correct solution would be to update the proptype manually and add the /* @typescript-to-proptypes-ignore */ annotation, so it won't be overridden.

[ledevinchi]

i'm kind of new to the industry, what next? is something that is going to be fix in the next version or where should i use @michaldudak /* @typescript-to-proptypes-ignore */?

[alexfauquette]

It's something that needs to be fixed on our side and will be available in following version. When the fix is done, this issue will be closed, and you will get the fix in the version coming after the issue closed (usualy on thursday)

[konrad-jamrozik]

I am running into something similar with a very simple LineChart. I get following console warning in Chrome DevTools:

console.js:213 Warning: Failed prop type: Invalid prop `axis.scaleType` of value `linear` supplied to `DefaultChartsAxisTooltipContent`, expected one of ["time"].

Chart def.:

<LineChart
  xAxis={[
    {
      data: [1, 2, 3],
    },
  ]}
  series={[
    {
      data: [1, 2, 3],
    },
  ]}
  width={500}
  height={300}
/>

npm ls (irrelevant rows omitted):

+-- @emotion/[email protected]
+-- @emotion/[email protected]
+-- @fontsource/[email protected]
+-- @mui/[email protected]
+-- @mui/[email protected]
+-- @mui/[email protected]
+-- @vitejs/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

Full stack trace:

chunk-BX4QH3UP.js?v=5bcdf0c4:64 Warning: Failed prop type: Invalid prop `axis.scaleType` of value `linear` supplied to `DefaultChartsAxisTooltipContent`, expected one of ["time"].
    at DefaultChartsAxisTooltipContent 
    at ChartsAxisTooltipContent 
    at div
    at PopperTooltip2 
    at Portal2 
    at Popper2 
    at 
    at NoSsr 
    at ChartsTooltip 
    at svg
    at 
    at ChartsSurface2 
    at HighlightProvider 
    at InteractionProvider 
    at CartesianContextProvider 
    at SeriesContextProvider 
    at DrawingProvider 
    at ChartContainer2 
    at div
    at 
    at ResponsiveChartContainer2 
    at LineChart2 
    at PrototypeChart 
    at span
    at 
    at Typography2 
    at div
    at 
    at Box3 
    at div
    at 
    at Container3 
    at App 
    at ThemeProvider2 

Looking here:

https://mui.com/x/api/charts/default-charts-axis-tooltip-content/#props

I see:

I guess other values than time should be supported?

[xorgal]

I'm having the same issue with PieChart:

Failed prop type: Invalid prop `series.data[0]` of type `object` supplied to `DefaultChartsItemTooltipContent`, expected `number`.

It seems the shape of data is same as described in documentation, not sure what is actually wrong. Here is implementation:

const ScoreChart = ({
  correctAnswers,
  wrongAnswers,
  score,
  width = 150,
  height = 150,
}: ScoreChartProps): JSX.Element => {
  const theme = useTheme();

  const getScoreChartData = (correctAnswers: number, wrongAnswers: number): ChartItem[] => {
    return [
      { value: correctAnswers, label: 'Correct answers' },
      { value: wrongAnswers, label: 'Wrong answers' },
    ];
  };

  const data = useMemo(() => {
    return getScoreChartData(correctAnswers, wrongAnswers);
  }, [correctAnswers, wrongAnswers]);

  return (
    <PieChart
      series={[{ data, innerRadius: 50, outerRadius: 70 }]}
      width={width}
      height={height}
      sx={{ border: 0 }}
      margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
      slotProps={{
        legend: {
          hidden: true,
          direction: 'row',
          position: {
            vertical: 'bottom',
            horizontal: 'middle',
          },
        },
      }}
      colors={[theme.palette.success.main, theme.palette.error.main]}
    >
      <ScoreLabel>{score.toFixed(0)}</ScoreLabel>
    </PieChart>
  );
};

As a temporary workaround I'm casting slice() method and error is not popping up anymore:

 series={[{ data: data.slice(), innerRadius: 50, outerRadius: 70 }]}

Dependencies:

@mui/material 5.15.5
@mui/system 5.15.5
@mui/x-charts 6.19.1
@emotion/styled 11.11.0
@emotion/cache 11.11.0
@emotion/react 11.11.3
react 18.2.0
react-dom 18.2.0

[dbuhon]

It is reproducible on the codesandbox example from the official doc.
When hovering over the chart the following warning appears in the console:

Warning: Failed prop type: Invalid prop `series.data[0]` of type `object` supplied to `DefaultChartsItemTooltipContent`, expected `number`.

[alexfauquette]

It's fixed in v7. I still need to cherry pick the modification in v6

It's a bit trickier. The fix is ready. I can't reproduce the bug. But because the fix was done in github.com/mui/material-ui (and bumping the monorepo) We've seen no modification in the changelog and so we did not release a v6.19.2 of the charts.

The fix will be available in 2 days with the next release

[alexfauquette]

Should be fixed now for both v6.19.3 and v7.0.0-beta.1

[Aqkotz]

Hi, just updated to v6.19.3 and also tried v7.0.0-beta.1 and getting the same problem, crashes on hover over pie charts and bar charts.

[konrad-jamrozik]

On mui/[email protected] I am still getting the same problem described in my comment above:

Warning: Failed prop type: Invalid prop `axis.scaleType` of value `linear` supplied to `DefaultChartsAxisTooltipContent`, expected one of ["time"].

[alexfauquette]

@Aqkotz @konrad-jamrozik
Could you provide a reproduction of the tooltip failing?

For the pie chart, I can see the following error

Warning: Failed prop type: Invalid prop seriesToDisplay[0].id of type number supplied to DefaultChartsLegend, expected string.

Which can be fixed by using string for series ids

However I don't see warning when the tooltip get displayed:

https://stackblitz.com/edit/react-a1vkus?file=Demo.tsx

bug_ttoltip.mp4.webm

[konrad-jamrozik]

@alexfauquette Apologies, looks like there is no problem after all.

I was trying to reproduce the issue on a new machine and I am unable to. The problem appears only on the older version of relevant MUI package. Looks like this was perhaps local caching issue on my part, sorry about that! Later today (in about 10 hours) I will double-check on my primary dev machine if it behaves the same way, but I fully expect that.

[Aqkotz]

@alexfauquette I changed the ids to strings, but still get this error when I hover the pie chart. I've cleared the npm cache and updated to 6.19.3.

TypeError: Cannot read properties of undefined (reading 'create') at @mui_x-charts_PieChart.js?v=08a2d3ef:11149:33 at muiStyledFunctionResolver (chunk-BQI326TR.js?v=b67161f0:7356:30) at transformedStyleArg (chunk-BQI326TR.js?v=b67161f0:7198:42) at handleInterpolation (chunk-BQI326TR.js?v=b67161f0:2654:22) at serializeStyles2 (chunk-BQI326TR.js?v=b67161f0:2817:19) at chunk-BQI326TR.js?v=b67161f0:3522:28 at chunk-BQI326TR.js?v=b67161f0:2907:16 at renderWithHooks (chunk-GSZ7ISAW.js?v=b67161f0:12171:26) at updateForwardRef (chunk-GSZ7ISAW.js?v=b67161f0:14327:28) at beginWork (chunk-GSZ7ISAW.js?v=b67161f0:15934:22)

[alexfauquette]

@Aqkotz Your error is unreleated to this issue. It's not a proptypes error. Coudl you open an issue with a reproduction example either in codesandbox or stackblitz such that I can reproduce and debug it?

@konrad-jamrozik Thanks for confirmation. I let you close this issue it it works on your other computer, or report the error if it does not 👍

[enlznep]

@alexfauquette Is dataset included in the fix as well?

https://codesandbox.io/p/sandbox/flamboyant-rain-d246n5?file=%252Fsrc%252FDemo.js

[alexfauquette]

@enlznep No, this one is another one that will need a distinct fix, because it's the TS definition which is wrong

[enlznep]

@alexfauquette I see. Is this ticket going to be enough to track the fixes for dataset or we have a separate issue for that?

[alexfauquette]

That's enough. This PR #11953 should solve it 👍

I was puzzled because I spoted and fixed it on v7 but forgot to back port it to v6

[konrad-jamrozik]

@alexfauquette I've checked on another machine and the problem I mentioned is indeed absent. Thank you for the quick fix! Much appreciated! ❤️

(note I don't have permissions to close this issue myself)