skills.rest
sgcarstrends
sgcarstrendsOFFICIAL
Explore all skills by this author →
GitHub

chart-implementation

Create and update interactive charts for car registrations and COE data in React/Next.js.

21|2|Updated Nov 5, 2023
Search Tags:#Recharts#charts#React#data#visualization#D3
One-click install
npx skills add https://github.com/sgcarstrends/sgcarstrends --skill chart-implementation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chart-implementation
Source: https://github.com/sgcarstrends/sgcarstrends/tree/main/.claude/skills/chart-implementation
Command: npx skills add https://github.com/sgcarstrends/sgcarstrends --skill chart-implementation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create and customize data visualization charts in apps/web/.

Core Features & Use Cases

  • Line/Bar/Multi-Line: Implement common chart types using a library (e.g., Recharts).
  • Responsive & Interactive: Build charts that adapt to container size and support tooltips.
  • Theming & Tokens: Align chart colours with the design system using tokens.

Quick Start

Create a new chart component using a chart library (e.g., Recharts) and feed it with car/COE data.

Frequently Asked Questions about chart-implementation

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

FAQPage Schema
How do I create interactive charts for React applications?▼

Interactive charts in React are built using visualization libraries like Recharts or Chart.js. Feed TypeScript components with data props (e.g., CarDataPoint, COEData) to render line, bar, or multi-line charts with tooltips and responsive layouts that adapt to container size.

Can I use Recharts to visualize car registration and COE data?▼

Yes. Recharts handles car registration and COE datasets through data-driven props. Create TypeScript React components that pass structured data to Recharts chart types, apply design-system color tokens for theming, and enable responsive behavior across device sizes.

What's the best way to make charts responsive in Next.js projects?▼

Responsive charts adapt to container dimensions using libraries like Recharts with responsive container wrappers. Build TypeScript React components that accept data props, apply CSS tokens for theming alignment, and support interactive tooltips without manual viewport logic.

How do I debug chart rendering issues in React components?▼

Chart rendering problems often stem from malformed data props, missing TypeScript types, or library configuration. Verify CarDataPoint and COEData structures match component expectations, check Recharts/Chart.js configuration, and test tooltips and layout responsiveness in isolation.

Do I need design tokens to style charts consistently?▼

Design tokens align chart colors with your design system for visual consistency. Apply tokens to Recharts or Chart.js themes in TypeScript React components so car registration and COE data visualizations match your application's color palette without hardcoding values.

Related Skills

Explore More Data & Analytics Skills→
nesihaver-ILnesihaver-IL

analytics-metrics

Build interactive analytics dashboards and charts in React with Recharts.

Community
Intermediate
cosmixcosmix
53

data-visualization

Create data visualizations from datasets with chart selection and clear labeling.

Community
Intermediate
dylantarredylantarre
38

react

Create token-driven React components with TypeScript and ARIA compliance.

Community
Intermediate
ErixWongErixWong
17

echarts

Generate interactive ECharts visualizations with Python scripting.

Community
Intermediate