analytics-charts

Transform incoming data into Recharts-compatible payloads for AnalyticsChart rendering.

803|289|Updated Nov 7, 2025
One-click install
npx skills add https://github.com/forcedotcom/afv-library --skill analytics-charts
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: analytics-charts
Source: https://github.com/forcedotcom/afv-library/tree/main/samples/webapp-template-app-react-sample-b2x-experimental/.a4drules/skills/feature-react-chart-analytics-charts
Command: npx skills add https://github.com/forcedotcom/afv-library --skill analytics-charts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires recharts.

What problem does it solve?

When users have raw data and need quick visual insights, this skill provides a clear workflow to transform data into charts using Recharts via the AnalyticsChart component, reducing manual chart construction time and ensuring consistent visuals.

Core Features & Use Cases

  • Interpret data types (time-series vs categorical) and map to appropriate chart shapes.
  • Map data to chart payloads compatible with Recharts via AnalyticsChart.
  • Choose a theme (red/green/neutral) and integrate the chart into the app UI.

Quick Start

Provide your data and let Analytics charts render a chart in your app.

Frequently Asked Questions about analytics-charts

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

FAQPage Schema
How do I turn raw data into charts using Recharts?

To turn raw data into charts, this skill transforms incoming data into a chart-ready payload and renders it using Recharts via the AnalyticsChart component. It automatically selects a time-series or categorical chart type based on your data characteristics.

How does data visualization handle missing values in time-series data?

Data visualization with this skill handles missing values gracefully by validating input formats and managing gaps in the payload before rendering. This ensures your time-series charts remain accurate and do not break when encountering incomplete datasets.

What is the best way to map categorical data to a chart payload?

The best way to map categorical data to a chart payload is to let the skill interpret your data types and automatically format them for Recharts. It validates the input and maps the categories to appropriate chart shapes for instant visualization.

Can I apply a red, green, or neutral theme to my data visualization charts?

Yes, you can apply a red, green, or neutral theme to your data visualization charts. The skill allows you to choose a theme during the payload transformation process to ensure the chart integrates consistently into your app UI.

Do I need to manually select a chart type for time-series data?

No, you do not need to manually select a chart type for time-series data. The skill evaluates your data characteristics and automatically chooses between a time-series or categorical chart type to render the appropriate visualization.