Plotcn
Three visualization engines. One coherent ecosystem. Source you own.
Plotcn is a source-first visualization system for React.
It brings together Recharts, D3.js, and Google Charts under a shared developer experience while keeping the strengths of each engine available. Instead of hiding visualization code behind a rigid package boundary, Plotcn distributes components through the shadcn Registry so the implementation lives directly inside your application.
Plotcn Architecture System
Visual contract connecting shared styling, specialized visualization engines, and shadcn registry distribution.
Vision
Plotcn is designed as a visualization-focused sibling to shadcn/ui rather than a traditional black-box chart package.
The Plotcn Registry distributes complete, editable source code that developers can install directly into their applications, inspect, own, and customize.
Recharts, D3.js, and Google Charts remain distinct visualization engines, while Plotcn owns the shared visual language, responsive behavior, accessibility patterns, interaction conventions, documentation, source distribution, and overall developer experience.
Recharts Collection
Dashboard, business analytics, Cartesian & radial metrics.
D3.js Collection
Advanced custom geometry, scales, force layouts & hierarchies.
Google Charts Collection
Core charts, Timeline, Sankey, TreeMap, Table & GeoChart.
Theme & Tokens
Semantic CSS variables with dark-mode adaptation.
Adaptive Responsiveness
Container-driven resizing with fluid decluttering.
Accessible By Default
ARIA roles, live regions, and natural-language summaries.
Truthful States
Explicit loading, empty, and actionable error states.
shadcn Registry
Direct source delivery via CLI — zero runtime lock-in.
Blocks & Templates
Complete analytics, dashboards, and reporting sections.
Interactive Docs & Playground
Live preview, theme toggling, and code generation.
The core product model flows directly from specialized visualization engines through Plotcn's shared visual and interaction standards into your Git repository:
Product Delivery Architecture
How visualization engines flow through Plotcn's shared system and registry directly into your codebase.
- 01DoneThree Visualization Engines
Recharts (React), D3.js (Math/Geometry), Google Charts (Geo & Enterprise).
- 02DonePlotcn Shared Layer
Standardizes theme tokens, responsiveness, accessibility summaries, and interaction conventions.
- 03DonePlotcn Registry
Distributes static JSON item manifests conforming to official shadcn registry schema.
- 04ActiveDeveloper-Owned Source
Source code copied directly into your components/charts/ directory under Git control.
- 05DoneConsumer Application
Direct compilation inside Next.js, Vite, or Remix with zero third-party runtime package lock-in.
Plotcn does not try to hide the underlying visualization engines behind one universal API.
Plotcn standardizes the experience around the visualization while preserving the strengths and native capabilities of each engine.
Visualization Engine Strategy
Plotcn supports three distinct visualization families.
Recharts
D3.js
Google Charts
Recharts
Use Recharts for:
- Standard dashboard charts
- Business metrics and KPIs
- Analytics interfaces
- Declarative React visualization
- Common Cartesian charts (Line, Area, Bar)
- Pie and donut charts
- Straightforward interaction patterns
- Fast application development
Typical components include:
- Line & Area: Continuous time-series metrics, trends, and filled volume distributions
- Bar & Column: Categorical comparisons, grouped bars, and stacked financial metrics
- Pie & Donut: Proportional breakdowns, category shares, and center-stat KPI cards
- Scatter & Bubble: Two-dimensional correlation plots and distribution clusters
- Radar & Radial: Multi-axis capability scoring and circular progress metrics
- Composed Charts: Combined line and bar charts sharing a unified time axis
Recharts is the default starting point when a developer needs a polished, conventional React chart.
D3.js
Use D3.js for:
- Advanced custom visualization
- Bespoke geometric representations
- Custom mathematical scales and continuous domains
- Force-directed physics layouts
- Hierarchy and tree visualizations
- Complex data exploration and brush/zoom interactions
- Highly specialized visualization behaviors
Plotcn structures D3 implementations with a clear boundary: D3 governs the mathematics and coordinate calculation, while React governs the semantic DOM, lifecycle, and accessibility attributes.
- →Scales & Domains: Linear, logarithmic, time, and ordinal mappings
- →Geometric Curves: Spline curves, areas, arc math, voronoi tessellation
- →Complex Layouts: Force-directed physics simulations, hierarchical trees
- →Data Transformations: Bins, cross-filtering, and geographic projections
- →SVG Element Rendering: Declarative JSX <path>, <rect>, <circle> nodes
- →Component Lifecycle: State hooks, props reactivity, and resize observers
- →Accessibility (a11y): ARIA attributes, live regions, table disclosures
- →Interactive Events: React onClick, hover states, keyboard :focus-visible
Plotcn prefers granular micro-packages (such as d3-shape, d3-scale, d3-force) rather than monolithic bundle imports:
// Preferred: modular micro-packageimport { scaleLinear } from "d3-scale"import { line, curveMonotoneX } from "d3-shape"Google Charts
Use Google Charts for mature Google-powered visualization types and geographic visualization where its native chart implementations are useful.
Core Charts
Mature standard charts
Specialized Visualizations
Time, flow & hierarchy
Geographic Visualization
Statistical choropleths
Google Charts remains a separate engine family. Its APIs are not merged into Recharts or D3 abstractions.
Shared Visualization Experience
The three engines remain technically independent while sharing a consistent product experience.
System Component Architecture
Plotcn decouples the presentation layer from underlying visualization engines for maximum flexibility.
The shared layer covers:
- Chart containers and ResizeObserver bounding
- Responsive measurement and fluid adaptations
- Visual theme tokens and dark-mode adaptation
- Truthful states (loading, empty, error, offline)
- Accessibility (roles, live announcements, screen-reader data summaries)
- Metadata standards and documentation structure
- Tooltip and legend visual conventions
- Number and currency formatting utilities
- Purposeful motion adhering to
prefers-reduced-motion
The shared layer never becomes a heavy cross-engine abstraction.
Consistency around the chart. Freedom inside the chart.
Product Principles
| Principle | Implementation meaning |
|---|---|
| Copy, own, customize | Installed Plotcn chart source lives inside your application and remains 100% editable. |
| Three engines, one ecosystem | Recharts, D3.js, and Google Charts remain separate implementations presented within one coherent visualization system. |
| Choose the right engine | Developers select Recharts for conventional React charts, D3.js for custom math/geometry, and Google Charts for mature Google chart types and GeoChart. |
| Shared experience, not a universal wrapper | Plotcn standardizes theme, responsiveness, states, accessibility, and documentation without forcing every engine into one artificial API. |
| Adaptive responsiveness | Charts alter tick density, legend placement, labels, margins, and interaction according to container dimensions—not merely global viewport width. |
| Accessibility by default | Accessible naming, descriptions, natural-language summaries, keyboard navigation, reduced motion, and non-color encodings are standard contract requirements. |
| Purposeful motion | Animations communicate state transitions, filtering, and data changes rather than adding decorative distractions. |
| Simple first, composable when needed | Provides ready-to-use chart components while preserving readable source and low-level customization paths. |
| Engine isolation | Installing a Recharts component never installs D3.js or Google Charts dependencies, and vice versa. |
| Source-first distribution | Plotcn components are delivered through the shadcn Registry model rather than requiring an immutable npm runtime package. |
| Theme-native | Inherits your application's CSS variables and translates shared semantic tokens into each engine where necessary. |
| Truthful states | Loading, empty, error, unavailable, and offline states are explicit rather than masked with synthetic placeholder data. |
| Progressive complexity | Start with a simple pre-configured component and customize deeper only when requirements demand it. |
Three Engines, Different Strengths
There is no single "best" visualization engine. Choose the engine that best matches the specific visualization challenge.
| Requirement | Recommended engine |
|---|---|
| Standard dashboard metrics & KPIs | Recharts |
| Business analytics & reporting | Recharts |
| Conventional React declarative charts | Recharts |
| Highly customized SVG visualization | D3.js |
| Specialized geometry & continuous scales | D3.js |
| Custom interaction model & brush/zoom | D3.js |
| Force-directed networks & hierarchies | D3.js |
| Google GeoChart (world, countries, provinces) | Google Charts |
| Google Timeline & Gantt visualizations | Google Charts |
| Google Sankey flow diagrams | Google Charts |
| Google TreeMap hierarchical density | Google Charts |
| Google Table statistical data grids | Google Charts |
| Existing Google Charts enterprise migrations | Google Charts |
Engine Isolation
Each registry item installs only what it requires. Plotcn strictly avoids bundle contamination:
Zero D3 or Google code installed
Modular micro-packages only; zero Recharts or Google code
Zero npm bundle bloat; loads runtime from Google CDN on demand
Engine isolation ensures your production application bundle contains zero unused visualization code.
Google Charts Runtime Model
Google Charts requires special architectural treatment because the underlying visualization runtime is externally hosted on Google's content delivery network.
Google Charts Hosted Runtime Architecture
How Plotcn coordinates local React wrapper source with Google's externally hosted charting engine.
- 01DonePlotcn Installed Source
Your local component in components/charts/google/ with full customization freedom.
- 02DoneReact Chart Wrapper
Manages container ref, resize observers, theme token mapping, and loading/error states.
- 03DoneShared Google Loader
Singleton script injector deduplicating CDN requests and managing package promises.
- 04DoneGoogle Charts Runtime
External google.visualization library loaded securely from gstatic CDN.
- 05ActiveRendered Visualization
Hardware-accelerated SVG or Canvas rendered into the accessible Plotcn container.
What Plotcn owns:
- React wrapper source code
- Component lifecycle and resize observers
- Loader coordination and promise deduplication
- CSS variable theme mapping
- Loading, empty, and error fallback surfaces
- Accessible screen-reader summaries and data tables
- Typed data transformation and event translation
What Google owns:
- The underlying hosted chart rendering engine (
google.visualization)
The developer owns the installed Plotcn Google wrapper source, but not Google's hosted visualization engine.
Google Loader Principle
All Google Charts components share a single, resilient loader located in @/lib/google-charts/loader.ts.
- Single Script Injection: The external loader script tag is injected into the DOM at most once across the entire application lifetime.
- Concurrent Request Deduplication: If multiple Google chart components mount simultaneously, they all await the same initialization Promise.
- On-Demand Package Loading: Only the specific package needed (such as
corechartorgeochart) is requested viagoogle.charts.load. - SSR Safety: Guards against accessing
windowordocumentduring server-side pre-rendering, rendering a stable skeleton during hydration. - Timeout & Error Handling: If Google's CDN is unreachable or blocked by CSP, the loader transitions gracefully to an error surface with retry support.
The loader exposes a strictly typed state machine:
export type GoogleChartsLoaderState = | "idle" | "loading" | "ready" | "error"Google Package Isolation
The loader loads only the specific packages declared by the mounted chart:
const googleChartPackages = { core: ["corechart"], geo: ["geochart"], timeline: ["timeline"], sankey: ["sankey"], org: ["orgchart"], table: ["table"],} as const- Google Line, Bar, Area → loads
corechart - Google GeoChart → loads
geochart - Google Timeline → loads
timeline - Google Sankey → loads
sankey
Packages are never loaded globally or preemptively.
Target Users
Plotcn is built for:
- Frontend engineers building dashboards, SaaS analytics, reporting applications, and data-intensive admin panels.
- Product teams wanting polished charts without repeatedly re-implementing responsive math, accessibility tables, tooltips, and loading skeletons.
- Design system engineers requiring source-owned visualization primitives that conform directly to their brand's design tokens.
- React teams already using shadcn/ui and looking for an identical copy-and-own workflow for visualization.
- Data specialists requiring D3.js geometric flexibility for custom mathematical projections and network graphs.
- Teams needing geographic visualization via Google GeoChart for country, state, and regional choropleths.
- Organizations migrating existing Google Charts code into a modern, theme-aware React design system.
- Developers who want complete source ownership and refuse to be trapped by closed-box third-party chart libraries.
Target Developer Experience
The intended developer journey is fast, transparent, and direct:
Target Developer Journey
The 6-stage lifecycle from discovering a chart to shipping customizable source code.
- 01DoneDiscover Visualization
Browse catalog for Cartesian, statistical, network, or geographic charts.
- 02DoneChoose Engine
Select Recharts (React), D3.js (custom geometry), or Google Charts (Geo/enterprise).
- 03DoneInspect Source
Review raw TypeScript file, theme tokens, dependencies, and a11y disclosure tables.
- 04ActiveInstall via shadcn CLI
Run shadcn add @plotcn/<item> to pull source directly into your codebase.
- 05DoneImport & Connect Data
Import the local component, pass typed props, and customize styling to match your brand.
- 06DoneShip with Ownership
Deploy with zero third-party chart package runtime lock-in or recurring dependencies.
Direct shadcn installation example:
npx shadcn@latest add @plotcn/line-basicOr for D3 and Google Charts:
npx shadcn@latest add @plotcn/d3-force-networknpx shadcn@latest add @plotcn/google-geochartProduct Positioning
Plotcn is intentionally not another proprietary chart library, nor is it an all-encompassing wrapper attempting to hide underlying engines.
Plotcn is a source-first React visualization system that brings Recharts, D3.js, and Google Charts into one consistent developer experience.
The engines provide the specialized visualization power. Plotcn provides the design language, responsive containers, error surfaces, accessible data summaries, registry distribution, and complete source code ownership.
Final Architecture & Mental Model
Full Product Architecture & Mental Model
Three visualization engines. One coherent ecosystem. Source you own.
Three visualization engines. One coherent ecosystem. Source you own.
- Recharts handles declarative, fast product dashboards.
- D3.js provides complete geometric and mathematical control.
- Google Charts delivers mature enterprise chart types and choropleth geographic maps.
Plotcn unifies all three under a single visual and architectural standard without compromising what makes each engine distinct.
Project Status
Plotcn is built iteratively and published component-by-component through verified registry items.