skills.rest
Rachit246-art
Rachit246-artCOMMUNITY
Explore all skills by this author →
GitHub

charts

Generate React data visualizations with Recharts chart components.

Updated May 1, 2026
Search Tags:#data visualization#charts#react#dashboard#recharts#tooltip#responsivecontainer
One-click install
npx skills add https://github.com/Rachit246-art/rvglobal1 --skill charts-rachit246-art
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: charts
Source: https://github.com/Rachit246-art/rvglobal1/tree/main/.emdash/skills/charts
Command: npx skills add https://github.com/Rachit246-art/rvglobal1 --skill charts-rachit246-art

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of creating reliable, reusable data visualizations in React using Recharts with consistent styling and correct rendering behavior.

Core Features & Use Cases

  • Reusable chart patterns: Line, Bar, Area, Pie, and more, so you can assemble dashboards without re-deriving configuration each time.
  • Guaranteed layout correctness: Enforces the required ResponsiveContainer wrapper to prevent charts from not rendering.
  • Production-ready styling conventions: Uses Tailwind-compatible CSS variable colors (e.g., primary/muted/border) and consistent Tooltip styling.
  • Common analytics needs: Supports grouped/stacked bars, multi-series lines, donut/pie labels, number/date formatting, and custom tooltip content.
  • Use case example: Create an analytics dashboard showing monthly revenue (line), revenue vs expenses (grouped bar), and traffic split (pie/donut) with consistent theming.

Quick Start

Use the charts skill to wrap your chosen Recharts component in ResponsiveContainer and build a dashboard card with Tooltip styling using the provided patterns.

Frequently Asked Questions about charts

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

FAQPage Schema
How do I build a React dashboard with Recharts that renders correctly?▼

To prevent Recharts components from not rendering in a React dashboard, wrap every chart in a ResponsiveContainer. This enforces layout correctness by ensuring the visualization properly adapts to its parent container dimensions.

How do I style Recharts tooltips and axes with Tailwind CSS variables?▼

Style Recharts tooltips and axes by applying Tailwind-compatible CSS variable colors like primary, muted, and border. This approach maintains consistent theming across your analytics pages without hardcoding hex values.

Can I create stacked and grouped bar charts for analytics pages using Recharts?▼

Yes, you can create stacked and grouped bar charts for analytics pages using Recharts. The charts skill supports multi-series visualizations, allowing you to compare datasets like revenue versus expenses within a single component.

What is the best way to format dates and numbers in Recharts custom tooltips?▼

The best way to format dates and numbers in Recharts custom tooltips is to define custom tooltip content components. This allows you to apply specific formatting functions to your data series before displaying them in the visualization interface.

Why does my Recharts line chart not show up on my React reporting UI?▼

Your Recharts line chart might not show up because it is missing a ResponsiveContainer wrapper. Wrapping your visualization components correctly is required to enforce layout correctness and trigger rendering.

Related Skills

Explore More Design & Creative Skills→
ngocnhanvongocnhanvo

charts

Create static and interactive charts with the recharts library.

Community
Intermediate
dain-agencydain-agency

dashboard-audit

Audit web application dashboards for KPI accuracy and responsive compliance.

Official
Intermediate
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
Bhanuprakash2580Bhanuprakash2580

charts

Provide recharts patterns for visualizing data in React dashboards.

Community
Advanced