AIKraft/AI/Войти
AIKraft/Skills/recharts

recharts

Build composable, responsive React charts with Recharts library. Use when creating data visualizations including line charts, area charts, bar charts, pie charts, scatter plots, and composed charts. Handles chart customization, responsive sizing, tooltips, legends, axes configuration, performance optimization, and accessibility.

ansanabria official Дизайн

Что делает навык

Recharts — это библиотека визуализации данных на React, построенная на базе D3, которая позволяет создавать композируемые и декларативные графики. Она решает задачу адаптивного отображения данных, поддерживая линейные, столбчатые, круговые диаграммы и их комбинации.

Когда применять

  • Визуализация временных рядов с помощью линейных графиков (LineChart).
  • Сравнение категорий данных с использованием столбчатых диаграмм (BarChart).
  • Отображение пропорций с помощью круговых диаграмм (PieChart).
  • Создание сложных комбинированных графиков (ComposedChart) для многомерных данных.

Как работает

  1. Установить библиотеку в проект с помощью команды npm install recharts.
  2. Импортировать необходимые компоненты, такие как LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend и ResponsiveContainer.
  3. Создать обертку ResponsiveContainer для обеспечения адаптивности графика.
  4. Настроить оси (XAxis, YAxis) и сетку (CartesianGrid) для корректного отображения данных.
  5. Добавить интерактивные элементы, такие как Tooltip и Legend, для улучшения пользовательского опыта.

Примеры запросов агенту

Создай линейный график продаж за последние 12 месяцев с использованием Recharts.
Реализуй адаптивную столбчатую диаграмму для сравнения выручки по регионам.
Сгенерируй круговую диаграмму распределения бюджетов с легендой и тултипами.

Что понадобится

  • D3 (используется внутри библиотеки)
  • Node.js (для установки через npm)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «recharts» из репозитория: # https://github.com/ansanabria/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r recharts/ ~/.claude/skills/recharts/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.