skills.rest
openai
openaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-and-nextjs-data-visualization

Integrate charts and diagram renderers into React and Next.js applications.

5.3k|765|Updated Mar 4, 2026
Search Tags:#charts#NextJS#SSR#D3#reAct#Data Visualization#Hydration
One-click install
npx skills add https://github.com/openai/plugins --skill react-and-nextjs-data-visualization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-and-nextjs-data-visualization
Source: https://github.com/openai/plugins/tree/main/plugins/build-web-data-visualization/skills/react-and-nextjs-data-visualization
Command: npx skills add https://github.com/openai/plugins --skill react-and-nextjs-data-visualization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Embedding charts, diagrams, and WebGL visualizations in React or Next.js apps raises hard questions about component ownership, hydration safety, server/client boundaries, and bundle size. This Skill provides the integration patterns and decision rules to wire D3, Canvas, Vega-Lite, Three.js, and diagram libraries into React surfaces without SSR breakage or state chaos.

Core Features & Use Cases

  • Ownership Boundaries: Defines a clear split where React owns layout, controls, and application state while the visualization layer owns scales, geometry, and imperative rendering.
  • Next.js Guidance: Covers Server vs Client Components, dynamic imports, hydration-safe rendering, URL-backed view state, and route-level bundle splitting.
  • Specialized Surfaces: Handles scrollytelling, editorial infographics, WebGL/particles, UML and architecture diagrams, and operational dashboards with mobile-first responsive rules.
  • Use Case: You are adding an interactive D3 chart to a Next.js App Router page and hitting hydration errors. This Skill tells you to isolate the chart in a Client Component with a dynamic import, keep data fetching on the server, and back the view state with search params.

Quick Start

Ask the assistant to integrate your chart into a React or Next.js app, for example: "Make this D3 chart work cleanly in my Next.js App Router page without hydration issues."

Frequently Asked Questions about react-and-nextjs-data-visualization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate a D3 chart into a React component?▼

Let React own the container, layout, and controls while D3 owns scales, geometry, and narrowly scoped DOM updates via refs. Avoid letting React and D3 mutate the same nodes, and keep effects scoped to chart lifecycle work.

Should my chart be a Server or Client Component in Next.js?▼

Keep data fetching and framing layout in Server Components, and move interactive charts, container measurement, pointer events, and browser-only libraries into Client Components. Use dynamic imports when the chart runtime should avoid SSR or is not needed on first paint.

How do I fix hydration errors with charts in Next.js?▼

Hydration errors occur when browser-only chart code runs during server rendering. Isolate the chart behind an explicit client-only boundary or dynamic import with SSR disabled, and parse URL state before initializing client chart state.

D3 vs Vega-Lite vs Canvas for React charts?▼

Grammar-based embeds like Vega-Lite or Observable Plot are simplest for standard product charts. Use D3 for custom scales and interactions, and Canvas or WebGL when rendering large datasets that need imperative drawing behind a stable component boundary.

How do I handle chart state and shareable URLs in React?▼

Model filters, ranges, selected entities, and drill-down paths as URL-backed state using route or search params. Use replace-style navigation for transient changes and push-style for committed selections; reserve localStorage for small preferences only.

When should a chart not be server-side rendered?▼

Avoid SSR when the chart depends on browser-only APIs, container measurements, pointer events, or heavy WebGL runtimes. Lazy-load these with dynamic imports, reserve aspect ratios to prevent layout shift, and pause animation loops when offscreen.

Related Skills

Explore More Software Engineering Skills→
brainbrewlabsbrainbrewlabs
7

data-cleaning

Profile and clean tabular datasets, then write a cleaned file with a change report.

Official
Intermediate
ESO-ToolkitESO-Toolkit
2

write-playwright-tests

Create Playwright end-to-end and visual regression tests for the ESO Log Aggregator.

Official
Advanced
cpantuscpantus

data-visualization-designer

Guide chart-type selection, color strategy, and visual encoding for data visualizations.

Community
Advanced
nexu-ionexu-io
93.2k

d3-visualization

Generate interactive data visualizations and complex charts using the D3.js library.

Official
Intermediate