---
name: "@plotcn"
slug: "plotcn"
description: "Source-first React visualization components for Recharts, D3.js, and Google Charts"
category: "Animated components"
tags: ["accessibility", "animation", "backgrounds", "blocks", "charts", "dashboard", "loaders", "maps", "overlays", "theming"]
framework: "react"
license: "MIT"
author: "CodeWithEswar"
website: "https://plotcn.vercel.app"
github: "https://github.com/CodeWithEswar/plotcn"
registry: "https://plotcn.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 49
generated_at: "2026-09-21T01:50:16.753Z"
---

# @plotcn

Source-first React visualization components for Recharts, D3.js, and Google Charts

## Links

- Website: https://plotcn.vercel.app
- GitHub: https://github.com/CodeWithEswar/plotcn
- Registry JSON: https://plotcn.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/plotcn
- This file: https://sh4dcn.vercel.app/md/plotcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://plotcn.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://plotcn.vercel.app/r/registry.json
bunx shadcn@latest add https://plotcn.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/CodeWithEswar/plotcn.git
# fetch the raw registry index
curl -s https://plotcn.vercel.app/r/registry.json
```

## Components (49)

| name | type | description | install |
| --- | --- | --- | --- |
| chart-container | registry:ui | Shared responsive container, ResizeObserver, and CSS token bridge. | `npx shadcn@latest add https://plotcn.vercel.app/r/chart-container.json` |
| chart-state | registry:ui | Truthful loading, empty, and error fallback states with glassmorphic styling. | `npx shadcn@latest add https://plotcn.vercel.app/r/chart-state.json` |
| chart-tooltip | registry:ui | High-contrast developer tooltip with tabular numbers and semantic token mapping. | `npx shadcn@latest add https://plotcn.vercel.app/r/chart-tooltip.json` |
| chart-tokens | registry:style | Canonical chart surface, interaction, state, tooltip, and palette tokens. | `npx shadcn@latest add https://plotcn.vercel.app/r/chart-tokens.json` |
| chart-legend | registry:ui | Series-aware line, area, bar, and point legend treatment. | `npx shadcn@latest add https://plotcn.vercel.app/r/chart-legend.json` |
| chart-accessibility | registry:ui | Screen-reader descriptions, live regions, and accessible data disclosure tables. | `npx shadcn@latest add https://plotcn.vercel.app/r/chart-accessibility.json` |
| chart-theme | registry:ui | Semantic CSS variable token extraction and palette resolution. | `npx shadcn@latest add https://plotcn.vercel.app/r/chart-theme.json` |
| line-signal | registry:component | Focused single-series time-series or ordered categorical line visualization with restrained active-point emphasis. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-signal.json` |
| line-pulse | registry:component | High-frequency operational trend visualization for rapidly changing metrics, rolling windows, and live telemetry surfaces. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-pulse.json` |
| line-twin-compare | registry:component | Comparative time-series line visualization contrasting a primary series against a reference series with synchronized inspection and truthful delta context. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-twin-compare.json` |
| line-range | registry:component | Visualizes a central trend alongside a lower-to-upper interval envelope for forecasts, confidence intervals, and operational tolerance bands. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-range.json` |
| line-step-signal | registry:component | Stepped visualization for discrete changes that remain in effect until the next observation, communicating quotas, pricing plans, and configuration states. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-step-signal.json` |
| line-milestones | registry:component | Time-series trend with sparse event annotations and milestone pins for releases, incidents, launches, and policy changes. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-milestones.json` |
| line-threshold | registry:component | Quantitative time-series trend evaluated against horizontal reference boundaries and bounded operating regions. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-threshold.json` |
| line-focus | registry:component | An interaction-first time-series line optimized for precise keyboard focus, pointer/touch scrubbing, crosshair inspection, and persistent locked tooltips. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-focus.json` |
| line-multi-signal | registry:component | Multi-series time-series visualization with deterministic series identity, shared nearest-X inspection, and responsive interactive legend controls. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-multi-signal.json` |
| line-forecast | registry:component | Observed-versus-forecast time-series visualization with explicit prediction semantics, non-color line encoding, and optional uncertainty treatment. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-forecast.json` |
| area-prism | registry:component | Single-series magnitude area chart with restrained semantic fill, explicit baseline semantics, and Plotcn shared inspection. | `npx shadcn@latest add https://plotcn.vercel.app/r/area-prism.json` |
| area-stack-flow | registry:component | Additive multi-series stacked area chart with deterministic stack identity, truthful missing-value semantics, and contribution inspection. | `npx shadcn@latest add https://plotcn.vercel.app/r/area-stack-flow.json` |
| area-percent-stream | registry:component | 100% normalized stacked area chart for tracking how each contributor's share of the visible whole evolves over an ordered domain. | `npx shadcn@latest add https://plotcn.vercel.app/r/area-percent-stream.json` |
| area-range | registry:component | Bounded area visualization for showing a lower/upper envelope across an ordered domain, with optional central trend, truthful interval semantics, and explicit … | `npx shadcn@latest add https://plotcn.vercel.app/r/area-range.json` |
| area-comparison | registry:component | Two-series area visualization for comparing a primary magnitude against a reference magnitude across an ordered domain, using restrained overlap, deterministic… | `npx shadcn@latest add https://plotcn.vercel.app/r/area-comparison.json` |
| area-gradient-depth | registry:component | Single-series area visualization with a semantic fade-to-surface fill that adds restrained depth without encoding an additional variable. | `npx shadcn@latest add https://plotcn.vercel.app/r/area-gradient-depth.json` |
| area-baseline | registry:component | Single-series area visualization showing values above and below an explicit quantitative reference baseline with truthful deviation semantics. | `npx shadcn@latest add https://plotcn.vercel.app/r/area-baseline.json` |
| area-interactive | registry:component | Inspection-first area visualization with nearest-X selection, observation-aligned crosshair, keyboard navigation, and a persistent lockable tooltip. | `npx shadcn@latest add https://plotcn.vercel.app/r/area-interactive.json` |
| bar-signal | registry:component | Canonical zero-anchored bars for discrete categorical comparison with stable ordering, grouped series, and category-centric inspection. | `npx shadcn@latest add https://plotcn.vercel.app/r/bar-signal.json` |
| bar-group-compare | registry:component | Side-by-side peer measures within stable categorical groups, with shared quantitative scaling, deterministic series identity, and category-centric inspection. | `npx shadcn@latest add https://plotcn.vercel.app/r/bar-group-compare.json` |
| bar-stack-ledger | registry:component | Additive stacked bars for multi-series categorical composition with stable contributor identity, truthful totals, and category-centric inspection. | `npx shadcn@latest add https://plotcn.vercel.app/r/bar-stack-ledger.json` |
| bar-percent-stack | registry:component | 100% normalized stacked bars for comparing categorical composition while preserving raw contributor values, truthful zero/missing semantics, and stable stack i… | `npx shadcn@latest add https://plotcn.vercel.app/r/bar-percent-stack.json` |
| bar-diverging | registry:component | Signed categorical comparison around an explicit neutral reference, with truthful deviation geometry, symmetric scaling, touch-safe inspection, and neutral abo… | `npx shadcn@latest add https://plotcn.vercel.app/r/bar-diverging.json` |
| bar-bullet | registry:component | Compact actual-versus-target bars for operational scorecards, with per-category target markers, truthful delta semantics, and responsive row-based inspection. | `npx shadcn@latest add https://plotcn.vercel.app/r/bar-bullet.json` |
| bar-variance | registry:component | Actual-versus-plan delta bars centered on a truthful zero-variance baseline, with neutral signed semantics and auditable source values. | `npx shadcn@latest add https://plotcn.vercel.app/r/bar-variance.json` |
| bar-interval | registry:component | Floating range bars with explicit start and end bounds along a shared quantitative or temporal domain, truthful zero-width markers, and container-clamped toolt… | `npx shadcn@latest add https://plotcn.vercel.app/r/bar-interval.json` |
| bar-interactive | registry:component | Category-first bar inspection with a responsive band cursor, persistent touch locking, single-tab keyboard navigation, and controlled multi-series tooltip read… | `npx shadcn@latest add https://plotcn.vercel.app/r/bar-interactive.json` |
| line-basic | registry:component | Approachable Cartesian line chart built with Recharts and theme tokens. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-basic.json` |
| line-multiple | registry:component | Multi-series line chart comparing current vs previous periods. | `npx shadcn@latest add https://plotcn.vercel.app/r/line-multiple.json` |
| area-basic | registry:component | Gradient area chart with smooth monotone interpolation. | `npx shadcn@latest add https://plotcn.vercel.app/r/area-basic.json` |
| bar-basic | registry:component | Categorical vertical bar chart with rounded caps and responsive tooltips. | `npx shadcn@latest add https://plotcn.vercel.app/r/bar-basic.json` |
| d3-animated-line | registry:component | Continuous scales, monotone curves, and data points computed with D3 and rendered via React SVG. | `npx shadcn@latest add https://plotcn.vercel.app/r/d3-animated-line.json` |
| d3-force-network | registry:component | Physics-based node simulation with link springs and repulsion forces. | `npx shadcn@latest add https://plotcn.vercel.app/r/d3-force-network.json` |
| google-chart-loader | registry:ui | Resilient loader with promise deduplication and on-demand package loading. | `npx shadcn@latest add https://plotcn.vercel.app/r/google-chart-loader.json` |
| google-chart-container | registry:ui | Lifecycle wrapper managing ResizeObserver and fallback states for Google Charts. | `npx shadcn@latest add https://plotcn.vercel.app/r/google-chart-container.json` |
| google-geochart | registry:component | World, country, and regional statistical choropleths via Google Charts hosted geochart package. | `npx shadcn@latest add https://plotcn.vercel.app/r/google-geochart.json` |
| google-line | registry:component | Smooth 2D Cartesian line chart rendered with Google Charts corechart package. | `npx shadcn@latest add https://plotcn.vercel.app/r/google-line.json` |
| google-bar | registry:component | Categorical column chart rendered with Google Charts corechart package. | `npx shadcn@latest add https://plotcn.vercel.app/r/google-bar.json` |
| chart-motion | registry:hook | Reduced motion preference | `npx shadcn@latest add https://plotcn.vercel.app/r/chart-motion.json` |
| donut-basic | registry:component | Proportional breakdown with optional legend and pointer tooltips. | `npx shadcn@latest add https://plotcn.vercel.app/r/donut-basic.json` |
| block-frame | registry:component | Local panel isolation, metrics and honest dashboard states. | `npx shadcn@latest add https://plotcn.vercel.app/r/block-frame.json` |
| revenue-dashboard | registry:block | Revenue trend, channel comparison and contribution with real period and channel filters. | `npx shadcn@latest add https://plotcn.vercel.app/r/revenue-dashboard.json` |

## For AI agents

```text
You are adding components from @plotcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/plotcn.md) for the component list.
2. Fetch the machine-readable index: https://plotcn.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: plotcn).
```