How to get a Composite MUI X Chart to display noDataOverlay with an empty dataset

I'm using a MUI composite chart using and want to display "No data to display" when given an empty dataset. But I just get a completely blank chart.

      <ChartContainer
        dataset={[]}
        xAxis={[
          {
            id: "x-axis-id",
            scaleType: "band",
            dataKey: "name",
            height: 100,
          },
        ]}
        series={[
          { type: "bar", dataKey: "hours" },
          { type: "line", curve: "step", dataKey: "limit" },
        ]}
      >
        <BarPlot />
        <LinePlot />
        <ChartsXAxis axisId="x-axis-id" />
        <ChartsTooltip />
      </ChartContainer>

The "No data to display" message renders because of the ChartsNoDataOverlay component which is used in BarChart and not in BarPlot. I would recommend going over the actual code to get the details here:

• BarChart.tsx
• ChartContainer.tsx
• BarPlot.tsx
• ChartsOverlay

Since ChartContainer and BarPlot components do not have the built-in support for this you need to implement it on your own.

One way of doing it would be to check for the data before rendering the ChartContainer.

// Pseudo code, verify before use.

export default function CustomChartContainer({ dataset }) {
   const hasData = dataset && dataset.some((dataPoint) => Object.keys(dataPoint).length > 0);

   return (
       <>
           { hasData ? (
               <ChartContainer>...</ChartContainer>
           ) : (
               <p>No data to display</p>
           )}
       </>
   );

}