How does it handle responsive resizing issues?

It includes a specific pattern to fix the common Recharts 'width(-1)' warning by setting an initialDimension on the container.

Does it support empty data states?

Yes, the Skill utilizes a ChartWidget wrapper that includes built-in logic for 'isEmpty' flags and customizable empty messages.

What charting library does this skill use?

This skill primarily uses Recharts, integrated via shadcn/ui's ChartContainer for enhanced theming and responsive support.

Can I use custom colors with this skill?

Yes, it utilizes a standardized CSS variable system (e.g., --chart-1) to ensure charts remain consistent with the application's global theme.

Chart Implementation

Name: Chart Implementation
Author: sgcarstrends

bysgcarstrends

•

Analytics & Monitoring

Implements interactive, themed Recharts visualizations using shadcn/ui components and standardized design patterns.

The Chart Implementation skill provides a standardized framework for building professional data visualizations within the SG Cars Trends ecosystem. It streamlines the creation of responsive car registration and COE data charts by leveraging Recharts, shadcn/ui's ChartContainer, and a custom ChartWidget. The skill ensures consistent styling through CSS variables, solves common Recharts rendering issues (like the -1 width/height warning), and enforces best practices for performance and accessibility, making it an essential tool for developers building data-heavy dashboards.

Key Features

01Theme-aware visualization using project-specific CSS variables

02Standardized Recharts integration via shadcn/ui ChartContainer

0319 GitHub stars

04Automated empty state and entrance animations using ChartWidget

05Optimized performance through data and configuration memoization

06Pre-configured axis and tooltip styling for clean, modern interfaces

Use Cases

01Refactoring legacy visualization code to a unified design system

02Visualizing historical car registration trends and COE price fluctuations

03Building interactive dashboards with synchronized line and bar charts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sgcarstrends/sgcarstrends chart-implementation

For use in Claude.ai and ChatGPT

Download Skill