AIKraft/AI/Войти
AIKraft/Skills/lightweight-charts

lightweight-charts

Используйте lightweight-charts для создания финансовых графиков (свечные, линейные, гистограммы), настройки масштабов, работы с маркерами и потоковыми данными. Подходит для интеграции в React/Vue/Web Components и кастомных плагинов.

TRTradingView official Разработка ★ 17.5k

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

Навык обеспечивает работу с библиотекой lightweight-charts для создания финансовых графиков (свечные, линейные, гистограммы), настройки масштабов, работы с маркерами и потоковыми данными. Он позволяет корректно интегрировать графики в React/Vue/Web Components, избегая устаревших паттернов v4 и используя актуальный API v5.

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

  • Создание и настройка базовых финансовых графиков с различными типами серий (свечные, линейные) в JavaScript/TypeScript.
  • Обновление данных в реальном времени с использованием методов update или setData без потери видимого диапазона.
  • Добавление маркеров, водяных знаков (watermarks) и пользовательских примитивов на график.
  • Миграция существующего кода с устаревшего API v4 на современный API v5.
  • Интеграция графиков в проекты на базе React, Vue или Web Components с учетом жизненного цикла фреймворков.

Как работает

  1. Определить контекст: проверить наличие локальных типов в node_modules/lightweight-charts/dist/typings.d.ts (для потребителя) или dist/typings.d.ts (для исходного репозитория).
  2. Использовать API v5: импортировать типы серий (CandlestickSeries, LineSeries) и создавать их через chart.addSeries(SeriesType, options).
  3. Форматировать данные: использовать UTCTimestamp в секундах (Math.floor(Date.now() / 1000)), обеспечивая строгую возрастание и уникальность времени.
  4. Настраивать взаимодействие: использовать subscribeCrosshairMove, subscribeClick и методы преобразования координат (coordinateToPrice, timeToCoordinate).
  5. Работать с маркерами через createSeriesMarkers(series, markers), а не через устаревший series.setMarkers.
  6. Избегать прямых манипуляций с DOM или приватными методами; использовать публичные API для синхронизации масштабов и панелей.

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

Как создать свечной график на lightweight-charts v5 и добавить к нему данные?
Как правильно обновлять данные в реальном времени, чтобы не сбрасывать видимый диапазон графика?
Как добавить маркеры на серию в lightweight-charts, используя актуальный API v5?

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

  • Установленный пакет lightweight-charts в проекте (npm/yarn/pnpm).
  • Доступ к локальным типам TypeScript (typings.d.ts) для верификации API.
  • Среда выполнения JavaScript/TypeScript (браузер или Node.js для SSR).

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

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

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

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