Reusable Chart Library

Provide reusable React chart components for bar, line, donut, radar, and radial visualizations.

Updated Mar 10, 2026
One-click install
npx skills add https://github.com/ricardocidale/hbg-screens --skill reusable-chart-library
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Reusable Chart Library
Source: https://github.com/ricardocidale/hbg-screens/tree/main/.claude/skills/charts
Command: npx skills add https://github.com/ricardocidale/hbg-screens --skill reusable-chart-library

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of pre-built, customizable React components for generating various types of charts, simplifying data visualization in applications.

Core Features & Use Cases

  • Diverse Chart Types: Offers components for bar, line, donut, radar, and radial charts, catering to a wide range of data representation needs.
  • Customization Options: Each component allows for extensive customization through props, including data keys, colors, labels, and interactive features.
  • Use Case: Quickly integrate a multi-series line chart to display website traffic over time, or a donut chart to show the breakdown of a budget.

Quick Start

Use the BarChartCard component to display sales data with a vertical layout.

Frequently Asked Questions about Reusable Chart Library

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

FAQPage Schema
How do I create React charts for data visualization in my frontend application?

Create React charts by integrating a reusable component library that supports bar, line, donut, radar, and radial charts. These components accept props for data keys, colors, and labels to enable extensive data visualization customization.

What types of data visualization charts can I use for my UI library?

Available data visualization charts for your UI library include bar, line, donut, radar, and radial charts. Each type offers extensive customization options through props to cater to a wide range of data representation needs in frontend applications.

Can I use shadcn/ui components with my React data visualization setup?

Yes, you can use shadcn/ui components with your React data visualization setup. These chart components integrate directly with shadcn/ui to provide tooltips and use CSS variables for consistent theming across your frontend application.

How do I customize colors and labels for multi-series line charts in React?

To customize colors and labels for multi-series line charts in React, pass configuration props to the chart component. This allows you to define specific data keys, adjust interactive features, and modify visual styling to match your application requirements.

What is the best way to theme a donut chart component using CSS variables?

The best way to theme a donut chart component using CSS variables is to configure the reusable React chart library to inherit styles. This ensures your data visualization maintains consistent theming alongside integrated shadcn/ui tooltips.

Do I need external dependencies to display a radar chart in my frontend?

You do not need external dependencies to display a radar chart in your frontend. The chart library provides self-contained, pre-built React components that handle rendering and interactive features without requiring additional package installations.