TanStack/charts

어떤 프로젝트인가요?

핵심 기능

• 01데이터 모델을 재구성하지 않고도 배열, 객체, 튜플, 이터러블을 마크에 전달할 수 있습니다.
• 02간결한 linear, band, point, ordinal 스케일을 제공하며 d3-scale로 직접 대체할 수 있습니다.
• 03가이드 여백 자동 조정, 테마, 상호작용을 지원하는 반응형 크기 조절 기능을 제공합니다.
• 04SVG 서버 사이드 렌더링, 하이드레이션, 내보내기를 지원합니다.
• 05마크마다 발생하는 DOM 비용을 줄일 수 있는 선택형 Canvas 렌더러를 제공합니다.
• 06동일한 차트 정의를 여러 프레임워크와 vanilla 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은(는) 무엇인가요?

세분화된 D3 기본 요소를 기반으로 반응형·접근성 지원 서버 렌더링 차트를 만드는 타입 지정 TypeScript 차트 문법입니다. TanStack Charts는 마크, 채널, 스케일을 조합해 차트를 표현하는 TypeScript 시각화 라이브러리입니다. 마크는 원본 데이터 배열, 객체, 이터러블을 직접 사용하므로 차트를 만들기 위해 애플리케이션의 데이터 모델을 재구성할 필요가 없습니다. 숫자형, band, point, ordinal 스케일을 간결하게 제공하며, 더 풍부한 의미 체계가 필요하면 네이티브 d3-scale 함수를 대신 사용할 수 있습니다.

charts은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

charts은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

charts은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. charts의 마지막 커밋은 2026년 10월 22일입니다.

charts은(는) 어디에 사용할 수 있나요?

React 또는 Vue 애플리케이션에 일반적인 선형, 막대형, 영역형 차트를 추가할 때. SSR 페이지나 정적 내보내기를 위해 서버에서 차트를 렌더링할 때. 일반적인 차트 프리셋으로 구현하기 어려운 제품별 시각화를 만들 때. 여러 프레임워크를 사용하는 코드베이스에서 하나의 차트 정의를 공유할 때.

charts는 어떻게 설치하나요?

워크스페이스 종속 항목을 설치합니다: pnpm install 통합 데이터 대시보드 샌드박스를 실행합니다: pnpm dev:sandbox

charts은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/TanStack/charts