Skip to content

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

Description

@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.

Metadata

Metadata

Assignees

Labels

bugSomething isn't workinggood first issueGood for newcomers

Type

Fields

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions