TanStack/charts

Что это?

Ключевые возможности

• 01Метки принимают массивы, объекты, кортежи и итерируемые структуры данных без изменения модели данных.
• 02Компактные линейные, полосовые, точечные и порядковые шкалы с возможностью напрямую подставить реализации из d3-scale.
• 03Адаптивный размер, автоматические отступы для направляющих, темы и взаимодействие.
• 04Серверный рендеринг в SVG, гидратация и экспорт.
• 05Дополнительный рендерер Canvas позволяет уменьшить нагрузку на DOM для каждой метки.
• 06Одно описание графика работает во множестве фреймворков и в обычном DOM.

Сценарии использования

• Добавление стандартных линейных, столбчатых графиков или диаграмм с областями в приложение на React или Vue.
• Серверный рендеринг графиков для SSR-страниц или статического экспорта.
• Создание специализированных визуализаций, выходящих за рамки стандартных шаблонов графиков.
• Использование одного описания графика в нескольких фреймворках в кодовой базе с несколькими фреймворками.

Быстрый старт

1. 1

   Установите зависимости рабочего пространства

   pnpm install
2. 2

   Запустите песочницу интегрированной панели данных

   pnpm dev:sandbox

Что важно знать

• !В README описана ещё не выпущенная ветка main, которая может отличаться от опубликованной версии 1.1.0.
• !Для разработки требуются Node.js 22 или новее и pnpm 11.
• !Рендеринг через Canvas снижает нагрузку на DOM, но не уменьшает потребление памяти сцены и затраты на поиск ближайшей точки среди большого объёма данных в крупных интерактивных графиках.

В подборках

Темы

Частые вопросы

Что такое charts?

Типизированный язык описания графиков на TypeScript для адаптивной, доступной и серверной визуализации на основе модульных примитивов D3. TanStack Charts — библиотека визуализации на TypeScript, в которой графики описываются как композиция меток, каналов и шкал. Метки работают напрямую с исходными массивами, объектами и итерируемыми структурами данных, поэтому приложению не нужно преобразовывать свою модель данных для построения графика. В библиотеке компактно реализованы распространённые числовые, полосовые, точечные и порядковые шкалы; при необходимости их можно заменить функциями из d3-scale с более широкими возможностями.

charts можно использовать бесплатно? Какая у него лицензия?

charts распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

charts всё ещё поддерживается?

Активно поддерживается. Последний коммит в charts — 22 окт. 2026 г..

Для чего можно использовать charts?

Добавление стандартных линейных, столбчатых графиков или диаграмм с областями в приложение на React или Vue. Серверный рендеринг графиков для SSR-страниц или статического экспорта. Создание специализированных визуализаций, выходящих за рамки стандартных шаблонов графиков. Использование одного описания графика в нескольких фреймворках в кодовой базе с несколькими фреймворками.

Как установить charts?

Установите зависимости рабочего пространства: pnpm install Запустите песочницу интегрированной панели данных: pnpm dev:sandbox

Где скачать charts?

Исходный код и инструкции по установке — на GitHub: https://github.com/TanStack/charts