Charts component crashes with TypeError during streaming: null data passed to Recharts

[RajeevRKC]

Bug Description

The built-in Charts component in @openuidev/react-ui throws a TypeError: Cannot read properties of null (reading 'map') during streaming rendering. The error originates from Recharts' CategoricalChartWrapper.render() when the OpenUI Renderer passes partial/incomplete data to the chart component before the full dataset has streamed in.

Steps to Reproduce

1. Scaffold a new project: npx @openuidev/cli@latest create --name test-app
2. Configure an LLM provider (OpenRouter with Claude Sonnet 4 in my case)
3. Send a prompt that generates a chart, e.g.: "Show me a CEO dashboard with quarterly revenue data for 4 regions"
4. Observe the console error during streaming

Error Stack Trace

TypeError: Cannot read properties of null (reading 'map')
    at CategoricalChartWrapper.render (recharts/es6/chart/...)
    at renderByOrder (recharts/es6/util/...)
    at RenderNode (@openuidev/...)
    at renderDeep (@openuidev/...)
    at Charts component (@openuidev/react-ui/dist/genui-lib/...)
    at GenUIAssistantMessage (...)

Expected Behavior

The Charts component should guard against null/undefined data during progressive streaming. A simple data ?? [] fallback before passing to Recharts would prevent this.

Actual Behavior

The chart eventually renders correctly after streaming completes, but the console error fires during the streaming phase when the chart structure arrives before its data array.

Environment

• @openuidev/react-ui: latest (installed 2026-03-18)
• @openuidev/react-lang: latest
• @openuidev/react-headless: latest
• Next.js 16.1.6 (Turbopack)
• React 19.2.3
• LLM: Claude Sonnet 4 via OpenRouter
• OS: Windows 11

Suggested Fix

In the Charts genui-lib component, add a null guard before passing data to Recharts:

// Before passing to <BarChart data={data}>
const safeData = data ?? [];

Additional Note

The FullScreen component also defaults logoUrl to https://crayonai.org/img/logo.png which appears to be a dead URL from the Crayon AI rebrand, causing broken image icons in the header and assistant avatar. Consider updating the default or removing it.

[pav2345]

Can i work on these ??

[ankit-thesys]

Can i work on these ??

Sure, once you come up with a plan, let me know here

[pav2345]

Thanks! I looked into the issue and here’s the plan:

Root cause: During streaming, data can be null/undefined, but Recharts expects an array and calls .map(), causing the crash.
Fix:
Add a safe guard in the Charts component before passing data:

const safeData = Array.isArray(data) ? data : [];

Then use:

<BarChart data={safeData} />

I’ll apply this across all chart types (Bar, Line, Area, Pie) to keep it consistent and avoid similar issues.

Also: fix the broken default logoUrl in FullScreen by removing it or rendering conditionally.

Let me know if I can proceed with the PR.

[ankit-thesys]

Sounds good, we can proceed with the PR.

Also, we can add the required fields for the data field in the schema.

https://github.com/thesysdev/openui/tree/main/packages/react-ui/src/genui-lib/Charts
Check here, see if changing this

  labels: z.array(z.string()),
  series: z.array(SeriesSchema),

To require will fix the issue in the parser, then we might not need to guard our component data prop.

What do you think of this solution?

[pav2345]

That makes sense — making labels and series required will definitely improve validation at the schema/parser level.

However, I think it may not fully eliminate the issue during streaming, since partial data (e.g. null or incomplete objects) can still reach the component before the full payload is parsed.

So I went with a combined approach:

• keep schema strict (required fields)
• add lightweight runtime guards in components to ensure safety during streaming

This way we handle both validation and runtime stability without relying on one layer alone.

please check the PR if its wrong please Ignore bro