skills.rest
oakoss
oakossOFFICIAL
Explore all skills by this author →
Website𝕏@oak_ossGitHub

data-visualizer

Generate charts and dashboards with Recharts, Chart.js, and D3.js.

14|5|Updated Jan 29, 2026
Search Tags:#data visualization#D3.js#analytics#dashboards#Recharts#charts#Chart.js
One-click install
npx skills add https://github.com/oakoss/agent-skills --skill data-visualizer-oakoss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-visualizer
Source: https://github.com/oakoss/agent-skills/tree/main/skills/data-visualizer
Command: npx skills add https://github.com/oakoss/agent-skills --skill data-visualizer-oakoss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create compelling charts, dashboards, and interactive data visualizations, transforming raw data into understandable insights.

Core Features & Use Cases

  • Library Selection: Choose between Recharts (React), Chart.js (framework-agnostic), and D3.js (custom) based on your project needs.
  • Chart Type Guidance: Recommends the best chart type (line, bar, pie, scatter, etc.) for your specific data and goals.
  • Dashboard Patterns: Provides templates for KPI dashboards, real-time monitoring, and interactive filtering.
  • Responsive Design: Ensures your visualizations adapt seamlessly to different screen sizes.
  • Use Case: You need to present quarterly sales trends. This Skill can help you select the best chart type, implement it using Recharts, and ensure it looks good on both desktop and mobile.

Quick Start

Use the data-visualizer skill to create a bar chart showing monthly sales data.

Frequently Asked Questions about data-visualizer

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

FAQPage Schema
How do I choose between Recharts, Chart.js, and D3.js for data visualization?▼

Choosing a data visualization library depends on your project: Recharts integrates with React, Chart.js is framework-agnostic, and D3.js enables custom interactive charts. The Skill recommends the best fit based on your specific environment and goals.

What is the best way to create a responsive KPI dashboard?▼

The best way to create a responsive KPI dashboard is to use established dashboard patterns like KPI cards and real-time feeds. This Skill provides templates and ensures visualizations adapt seamlessly to different screen sizes.

How do I select the right chart type for my dataset?▼

Selecting the right chart type requires matching your data and goals to visual formats like line, bar, pie, or scatter charts. This Skill analyzes your specific dataset to recommend the most effective chart type for clear data representation.

Can I build interactive data visualizations with real-time monitoring feeds?▼

Yes, you can build interactive data visualizations with real-time monitoring feeds. This Skill supports implementing interactive filtering and real-time dashboard patterns to help you track live data updates effectively.

Does Recharts work well for building React dashboards?▼

Recharts works well for building React dashboards because it is designed specifically for the React framework. This Skill helps you implement dashboards using Recharts to ensure responsive design and clear data storytelling.

Related Skills

Explore More Data & Analytics Skills→
rajyeole6rajyeole6

agency-data-consolidation-agent

Consolidate raw sales metrics and pipeline data into dashboard-ready JSON reports.

Community
Intermediate
auldsyababuaauldsyababua
6

csv-data-visualizer

Create Plotly-based interactive visualizations and statistical analyses from CSV data.

Community
Advanced
NaveedTechLabNaveedTechLab
11

frontend-react-dashboard

Generate responsive React 18+ dashboards with TailwindCSS, Recharts, and DataTable.

Community
Intermediate
FatByFatBy
2

python-dataviz

Generate static and interactive data visualizations with matplotlib, seaborn, and plotly.

Community
Intermediate