charts

Name: charts
Availability: InStock
Author: Rachit

Generate React data visualizations with Recharts chart components.

Updated May 1, 2026

Search Tags:#data visualization #charts #react #dashboard #recharts #tooltip #responsivecontainer

Ready to run

npx skills add https://github.com/Rachit246-art/rvglobal1 --skill charts-rachit246-art

💬 Prompt for ChatGPT / Claude Chat▼

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.