StonFluxVisual96 Chart Types.
Zero Dependencies.
순수 TypeScript, ~50KB, Canvas/SVG 하이브리드 렌더러.
세계 최고 성능 데이터 시각화 엔진.
Every Chart You Need
XY, Pie, Radar, Sankey, Map, Candlestick — 96종의 차트를 하나의 엔진으로
XY Charts
Pie & Percent
Radar & Gauge
Flow & Hierarchy
Map & Geo
Special
Blazing Fast
Canvas 기반 배치 렌더링으로 100만 데이터도 30ms 이내
Bundle Size (minified)
Render 10K Points (ms)
Why StonChart is Fast
amCharts, Recharts, Leaflet을 하나로 통합. 순수 수학 엔진 위에 Canvas/SVG 하이브리드 렌더러로 100만 데이터를 30ms 안에 렌더링합니다
Zero GC Pressure
Float64Array 재사용 Object Pool로 가비지 컬렉션 제로. 100만 데이터에서도 프레임 드랍 없음
Canvas Batch Drawing
데이터 포인트를 단일 Path로 배치 처리. beginPath → 전체 루프 → stroke 1회로 draw call 최소화
Auto Renderer
1K 미만은 SVG (DOM 인터랙션), 1K 이상은 Canvas (GPU 가속). 데이터 크기에 따라 자동 전환
TypedArray Pipeline
JSON → Float64Array 변환 파이프라인. 메모리 정렬 + SIMD 최적화로 CPU 캐시 히트율 극대화
Monotone Bezier
데이터 보간에 Monotone Cubic Hermite 사용. 오버슈트 없는 자연스러운 곡선 + 수학적 정확성
Tile Map Engine
OpenStreetMap 타일 로딩 + GeoJSON 폴리곤 + 마커/팝업. Leaflet 완전 대체, Canvas 직접 렌더링
5-Layer Engine Stack
각 레이어가 독립적으로 동작하며, 위 레이어는 아래 레이어만 의존합니다
React 컴포넌트 하나로 모든 차트 렌더링. type, data, theme 3개 prop만으로 즉시 사용
XY 40종, Pie 12종, Radar 9종, Flow 6종, Tree 8종, Map 13종, Special 8종
DOM 기반 툴팁, 범례, 축/눈금/그리드, 8종 테마 컬러 스키마
데이터 크기에 따라 SVG/Canvas 자동 선택. 1K 이하 SVG, 이상 Canvas 배치 렌더링
순수 수학 기반. Linear/Band/Log/Time 스케일, Bezier 곡선, TypedArray, Object Pool
Rendering Pipeline
3 Lines of Code
import { StonChart } from 'stonchart/react';
// Drop-in. Zero config.
<StonChart
type="bar"
data={[
{ name: "Q1", value: 420 },
{ name: "Q2", value: 680 },
{ name: "Q3", value: 890 },
]}
theme="midnight"
animate
/>