# 82chart

> A free (MIT), zero-dependency SVG chart component for Korean sites: line, area, bar, pie, donut, scatter, radar, gauge and combo charts, sparklines and KPI cards. Korean number units (만·억·조) on axes, zoom, crosshair tooltips, annotations, PNG/SVG/CSV export, keyboard access and server rendering (renderToSVG) are all free. React, Vue, Svelte and Angular wrappers and a <chart-82> web component. Made by 2nd Korea (세컨드코리아).

Current version: 0.2.0 (2026-10-21). License: MIT, free for commercial use, no license key, no watermark, no sign-up.
Install: npm i @82chart/core (wrappers: @82chart/react, @82chart/vue, @82chart/svelte, @82chart/angular)
CDN: https://82chart.com/cdn/v0.2.0/82chart.min.js (global Chart82), https://82chart.com/cdn/v0.2.0/82chart.esm.js, https://82chart.com/cdn/v0.2.0/82chart.css
Usage: createChart(elementOrSelector, { type: 'bar', data: { labels: ['1월', '2월'], series: [{ name: '매출', data: [120, 150] }] }, numberFormat: 'korean', unit: '원' }); chart.update(data); chart.on('click', fn); renderToSVG(options, { width: 640 }) without a DOM.
One y axis by default; a right axis is opt-in per series (axis: "right", y2Axis). timeZone for SSR on UTC servers; long lines are downsampled with LTTB (downsample). Charts follow the page theme with theme: "auto" and --c82-* CSS variables.
Korean docs: https://82chart.com/docs/ · English docs: https://82chart.com/en/docs/
All docs as one Markdown file: https://82chart.com/llms-full.txt · Any docs page as Markdown: add .md, e.g. https://82chart.com/en/docs/bar.md

## Start

- [Getting started](https://82chart.com/en/docs/getting-started.md): Draw your first chart in five minutes.
- [CDN files](https://82chart.com/en/docs/cdn.md): Pinned and latest URLs, and what each file is.
- [Data format](https://82chart.com/en/docs/data-format.md): labels and series, pairs, point objects, gaps and time axes.

## Chart types

- [Line chart](https://82chart.com/en/docs/line.md): Change over time: curves, steps, points and the last value.
- [Area chart](https://82chart.com/en/docs/area.md): Volume and totals: areas, stacked and 100% stacked.
- [Bar chart](https://82chart.com/en/docs/bar.md): Grouped, stacked, 100% stacked, horizontal and negative bars.
- [Pie and donut](https://82chart.com/en/docs/pie-donut.md): Shares of a whole, with the total in the middle and small slices folded into Other.
- [Scatter and bubble](https://82chart.com/en/docs/scatter.md): The relation between two values, with a third as the bubble size.
- [Radar chart](https://82chart.com/en/docs/radar.md): Several scores at a glance.
- [Gauge](https://82chart.com/en/docs/gauge.md): A single value against a range, such as progress to a target.
- [Combo (bars and a line)](https://82chart.com/en/docs/combo.md): Mix series types in one chart, with an opt-in right y axis for a second unit.
- [Sparklines and KPI cards](https://82chart.com/en/docs/sparkline-kpi.md): A big number, a change badge and a small trend line in one card.

## Numbers and look

- [Numbers and dates](https://82chart.com/en/docs/numbers-dates.md): Korean units, K/M, "in millions", currency, decimals, date patterns and time zones.
- [Axes](https://82chart.com/en/docs/axes.md): Whole-number ticks, tick step, reversed axes for ranks, two-line labels and a right y axis.
- [Theme and colors](https://82chart.com/en/docs/theme-colors.md): Light and dark, CSS variables, palettes and series colors.

## Interaction and export

- [Tooltip and legend](https://82chart.com/en/docs/tooltip-legend.md): Crosshair tooltips, custom values, and legend toggles.
- [Zoom and pan](https://82chart.com/en/docs/zoom.md): Drag, wheel or pinch to zoom; double-click to reset. Free.
- [Annotations: lines and bands](https://82chart.com/en/docs/annotations.md): Target lines, averages and shaded periods.
- [Export](https://82chart.com/en/docs/export.md): PNG, SVG and CSV downloads and a data table, with no key or watermark.
- [Large data (downsampling)](https://82chart.com/en/docs/large-data.md): Draw lines and areas with tens of thousands of points, thinned with LTTB; CSV and table keep everything.
- [Loading, errors and no data](https://82chart.com/en/docs/loading-errors.md): setLoading, setError with retry, and the noData message.
- [Linked charts (shared crosshair)](https://82chart.com/en/docs/group-sync.md): Different units: two charts with one crosshair instead of a dual axis.
- [Accessibility](https://82chart.com/en/docs/accessibility.md): Keyboard reading, an automatic summary, a hidden table and reduced motion.

## Frameworks and server

- [Web component <chart-82>](https://82chart.com/en/docs/web-component.md): One HTML tag, no framework.
- [React](https://82chart.com/en/docs/react.md): Use 82chart as a React component.
- [Vue](https://82chart.com/en/docs/vue.md): Use 82chart as a Vue component.
- [Svelte](https://82chart.com/en/docs/svelte.md): Use 82chart as a Svelte component.
- [Angular](https://82chart.com/en/docs/angular.md): Use 82chart as a Angular component.
- [Server rendering (SSR)](https://82chart.com/en/docs/ssr.md): renderToSVG makes an SVG string without a DOM: Node, Workers, Astro, e-mail and OG images.

## Reference

- [API](https://82chart.com/en/docs/api.md): createChart, chart instance methods and other exports.
- [Events](https://82chart.com/en/docs/events.md): click, hover, legendclick, zoom, ready, render and destroy.
- [Options](https://82chart.com/en/docs/options.md): Every option createChart accepts.

## More

- [Moving from To●●t UI Chart](https://82chart.com/en/docs/migrate-toast-ui-chart.md): Replace To●●t UI Chart, archived (no longer maintained) in September 2026.
- [Moving from Apex●●●rts or Chart.●s](https://82chart.com/en/docs/migrate-apexcharts-chartjs.md): When Apex●●●rts changed its license or Chart.●s needs one plugin too many.
- [FAQ](https://82chart.com/en/docs/faq.md): License, browsers, size, Korean units, dual axes and large data.

## 한국어 문서 (Korean docs)

82chart는 한국 서비스용 무료(MIT) 차트 컴포넌트입니다. 축에 만·억·조 단위, 확대·크로스헤어·주석·PNG/SVG/CSV 내보내기·키보드 접근성·서버 렌더링이 유료 등급 없이 들어 있습니다.

- [시작하기](https://82chart.com/docs/getting-started.md): 5분 안에 내 화면에 첫 차트를 그리는 방법.
- [CDN 파일](https://82chart.com/docs/cdn.md): 버전 고정 주소와 latest 주소, 파일 종류.
- [데이터 형식](https://82chart.com/docs/data-format.md): labels 와 series, 짝 배열, 점 객체, 빈 값, 날짜 축.
- [선 차트](https://82chart.com/docs/line.md): 시간에 따른 변화. 곡선, 계단, 점, 마지막 값 강조.
- [영역 차트](https://82chart.com/docs/area.md): 양과 합계를 함께 보는 영역, 누적, 100% 누적.
- [막대 차트](https://82chart.com/docs/bar.md): 묶음, 누적, 100% 누적, 가로, 음수 막대.
- [파이·도넛](https://82chart.com/docs/pie-donut.md): 전체 중 비율. 가운데 합계, 작은 조각은 기타로.
- [산점도·거품](https://82chart.com/docs/scatter.md): 두 값의 관계. 점 크기로 세 번째 값.
- [방사형(레이더)](https://82chart.com/docs/radar.md): 여러 항목의 점수를 한눈에 비교.
- [게이지](https://82chart.com/docs/gauge.md): 목표 대비 달성률 같은 값 하나.
- [콤보 (막대+선)](https://82chart.com/docs/combo.md): 시리즈마다 type 을 정해 한 차트에 섞기. 단위가 다르면 오른쪽 y축(직접 켜기).
- [스파크라인·KPI 카드](https://82chart.com/docs/sparkline-kpi.md): 큰 숫자, 증감 배지, 작은 추세선을 한 카드에.
- [숫자와 날짜](https://82chart.com/docs/numbers-dates.md): 만·억 단위, "단위: 백만원", 통화 기호, 소수점, 날짜 모양, 시간대.
- [축 다루기](https://82chart.com/docs/axes.md): 정수 눈금, 눈금 간격, 축 뒤집기(순위), 두 줄 라벨, 오른쪽 y축.
- [테마와 색](https://82chart.com/docs/theme-colors.md): 밝은·어두운 테마, CSS 변수, 팔레트, 시리즈 색.
- [툴팁과 범례](https://82chart.com/docs/tooltip-legend.md): 크로스헤어 툴팁, 값 모양 바꾸기, 범례로 시리즈 켜고 끄기.
- [확대와 이동](https://82chart.com/docs/zoom.md): 드래그·휠·핀치로 구간 확대, 더블클릭으로 원래대로. 무료.
- [주석: 기준선과 구간](https://82chart.com/docs/annotations.md): 목표선, 평균선, 행사 기간 음영.
- [내보내기](https://82chart.com/docs/export.md): PNG·SVG·CSV 내려받기, 표로 보기. 키·워터마크 없이.
- [많은 점 (다운샘플링)](https://82chart.com/docs/large-data.md): 수만 개 점의 선·영역을 LTTB 로 줄여 그리기. CSV·표는 원본 그대로.
- [불러오는 중·오류·빈 데이터](https://82chart.com/docs/loading-errors.md): setLoading, setError(다시 시도), noData 문구.
- [차트 묶기 (크로스헤어 공유)](https://82chart.com/docs/group-sync.md): 단위가 다른 값은 이중 축 대신 위아래 차트로.
- [접근성](https://82chart.com/docs/accessibility.md): 키보드로 값 읽기, 자동 요약, 숨긴 표, 움직임 줄이기.
- [웹 컴포넌트 <chart-82>](https://82chart.com/docs/web-component.md): 프레임워크 없이 HTML 태그 하나로.
- [React](https://82chart.com/docs/react.md): React 컴포넌트로 82chart 쓰기.
- [Vue](https://82chart.com/docs/vue.md): Vue 컴포넌트로 82chart 쓰기.
- [Svelte](https://82chart.com/docs/svelte.md): Svelte 컴포넌트로 82chart 쓰기.
- [Angular](https://82chart.com/docs/angular.md): Angular 컴포넌트로 82chart 쓰기.
- [서버에서 그리기 (SSR)](https://82chart.com/docs/ssr.md): renderToSVG 로 DOM 없이 SVG 문자열. Node, Workers, Astro, 메일, OG 이미지.
- [API](https://82chart.com/docs/api.md): createChart 와 차트 인스턴스의 메서드, 내보내는 함수.
- [이벤트](https://82chart.com/docs/events.md): click, hover, legendclick, zoom, ready, render, destroy.
- [옵션](https://82chart.com/docs/options.md): createChart 에 넘기는 모든 옵션.
- [To●●t UI Chart에서 옮기기](https://82chart.com/docs/migrate-toast-ui-chart.md): 2026년 9월 보관(유지보수 종료)된 To●●t UI Chart를 82chart로 바꾸는 순서.
- [Apex●●●rts·Chart.●s에서 옮기기](https://82chart.com/docs/migrate-apexcharts-chartjs.md): 라이선스가 바뀐 Apex●●●rts, 플러그인이 필요한 Chart.●s 를 바꿀 때.
- [자주 묻는 질문](https://82chart.com/docs/faq.md): 라이선스, 브라우저, 크기, 만·억 단위, 이중 축, 많은 점.

## Other

- [Demo](https://82chart.com/en/demo/)
- [Compared with other chart libraries](https://82chart.com/en/compare/)
- [Changelog](https://82chart.com/en/changelog/)
- [Forum](https://82chart.com/en/forum/)