관리자 대시보드
지표명, 큰 숫자, 전월 대비 증감, 기준선까지. 카드 하나로 KPI 화면이 끝납니다.
createChart('#sales', {
type: 'bar', title: '월별 매출',
value: 48250000, prefix: '₩ ', delta: 18.2,
scale: 1e6, unit: '백만원',
data,
});무료MIT 라이선스, 키·워터마크 없음
0외부 의존성
29KBgzip, 8가지 차트 전부
만·억한국식 숫자 단위 기본
자주 쓰는 차트, 한 줄씩이면 됩니다
아래 차트는 모두 실제로 동작합니다. 올려 보고, 범례를 눌러 보고, 방문자 차트는 끌어서 확대해 보세요.
대시보드에 넣을 차트, 82chart 하나면 됩니다
- 유료 등급의 기능을 기본으로확대·이동, 크로스헤어, 기준선, PNG·SVG·CSV 내보내기. 다른 라이브러리에서 상용 라이선스로 묶인 기능이 처음부터 들어 있습니다.
- 키 없이 쓰는 MIT라이선스 키, 워터마크, 매출 기준 유료 전환이 없습니다. 회사 사이트에서도 그대로 무료입니다.
- 한국식 숫자와 날짜축은 1,500만·3.4억, 툴팁은 48,250,000원. 날짜는 1월·10.21·2026.10.21(화)처럼 익숙하게.
- 보기 좋은 기본값카드형 머리말, 넓고 둥근 막대, 옅은 점선 격자. 색약에서도 구분되도록 검증한 8색 팔레트.
- 키보드와 스크린리더화살표로 값을 하나씩 읽고, 숨은 데이터 표와 자동 요약 문장을 함께 넣습니다.
- 어디서나 같은 그림SVG 하나로 화면, 서버 렌더링, 내보낸 이미지가 똑같습니다. React·Vue·Svelte·Angular·웹 컴포넌트.
한국 서비스의 숫자 화면에 맞춰서
보고서·공시
"단위: 백만원"과 콤마 숫자. 내보내기 메뉴에서 PNG·SVG·CSV로 바로 내려받습니다.
createChart('#report', {
type: 'line', footnote: '단위: 백만원',
scale: 1e6, unit: '백만원',
data,
});쇼핑몰 통계
상품 TOP 10은 가로 막대, 결제 수단은 도넛, 일별 매출은 막대와 선 콤보.
createChart('#top', {
type: 'bar', horizontal: true,
dataLabels: true, unit: '개',
data,
});서버에서 그리기
DOM 없이 SVG 문자열을 만듭니다. Cloudflare Workers, Node, Astro에서 OG 이미지나 메일 본문으로.
import { renderToSVG } from '@82chart/core';
const svg = renderToSVG(options, {
width: 1200, height: 630,
});만·억 단위, 옵션 없이
- 축은 짧게, 툴팁은 정확하게축 눈금은 1,500만·3.4억처럼 줄이고, 툴팁과 표에는 콤마 숫자를 그대로 보여 줍니다.
- "단위: 백만원" 보고서 방식scale: 1e6, unit: '백만원' 두 줄이면 축은 60백만원, 머리말 숫자는 원 단위 그대로.
- 증감 색도 고를 수 있게좋음은 초록, 나쁨은 빨강이 기본. 증권 화면처럼 상승 빨강·하락 파랑(▲▼)으로도 바꿉니다.
// Chart.●s: 만·억 단위는 직접 만들어야 합니다
scales: { y: { ticks: { callback: (v) =>
v >= 1e8 ? (v / 1e8).toFixed(1) + '억'
: v >= 1e4 ? (v / 1e4).toFixed(0) + '만'
: v.toLocaleString() } } }// 82chart: 한국어 페이지라면 기본값
createChart('#el', { type: 'bar', unit: '원', data });
// 축 0원 · 1,500만원 · 3,000만원 · 4,500만원
// 툴팁 48,250,000원To●●t UI Chart, Apex●●●rts에서 옮겨 오기
To●●t UI Chart는 2026년 9월 저장소가 보관되어 더 고쳐지지 않습니다. labels와 series 모양이 비슷해서 데이터는 거의 그대로 옮겨집니다.
<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/to●●tui-chart.min.css">
<script src="https://uicdn.toast.com/chart/latest/to●●tui-chart.min.js"></script>
<div id="chart"></div>
<script>
// columnChart = vertical bars (barChart is horizontal there)
const chart = to●●tui.Chart.columnChart({
el: document.getElementById('chart'),
data: {
categories: ['1월', '2월', '3월'],
series: [{ name: '매출', data: [32000000, 41000000, 38500000] }],
},
options: { chart: { title: '월별 매출', width: 600, height: 400 }, yAxis: { title: '원' } },
});
</script><link rel="stylesheet" href="https://82chart.com/cdn/v0.1.0/82chart.css">
<script src="https://82chart.com/cdn/v0.1.0/82chart.min.js"></script>
<div id="chart"></div>
<script>
const chart = Chart82.createChart('#chart', {
type: 'bar',
title: '월별 매출',
unit: '원',
height: 400,
data: {
labels: ['1월', '2월', '3월'],
series: [{ name: '매출', data: [32000000, 41000000, 38500000] }],
},
});
</script>const chart = new Apex●●●rts(document.querySelector('#chart'), {
chart: { type: 'line', height: 350, zoom: { enabled: true } },
series: [{ name: 'Visitors', data: [120, 180, 150, 220] }],
xaxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu'] },
yaxis: { labels: { formatter: (v) => v.toLocaleString() } },
});
chart.render();const chart = createChart('#chart', {
type: 'line',
height: 350,
zoom: true,
numberFormat: 'comma',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu'],
series: [{ name: 'Visitors', data: [120, 180, 150, 220] }],
},
});<canvas id="chart"></canvas>
<script>
new Chart(document.getElementById('chart'), {
type: 'bar',
data: { labels: ['1월', '2월', '3월'], datasets: [{ label: '매출', data: [12, 19, 14] }] },
});
</script><div id="chart"></div>
<script>
Chart82.createChart('#chart', {
type: 'bar',
data: { labels: ['1월', '2월', '3월'], series: [{ name: '매출', data: [12, 19, 14] }] },
});
</script>React, Vue, Svelte, Angular도 그대로
<link rel="stylesheet" href="https://82chart.com/cdn/v0.1.0/82chart.css">
<script src="https://82chart.com/cdn/v0.1.0/82chart.min.js"></script>
<div id="chart"></div>
<script>
Chart82.createChart('#chart', {
type: 'bar',
title: '월별 매출',
unit: '원',
data: {
labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
},
});
</script>import { createChart } from '@82chart/core';
import '@82chart/core/styles.css';
const chart = createChart('#chart', {
type: 'bar',
title: '월별 매출',
unit: '원',
data: {
labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
},
});
chart.on('click', (point) => console.log(point.x, point.y));import { Chart82 } from '@82chart/react';
import '@82chart/core/styles.css';
const data = {
labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};
export function SalesChart() {
return (
<Chart82
type="bar"
data={data}
options={{ title: '월별 매출', unit: '원' }}
onClick={(point) => console.log(point)}
/>
);
}<script setup>
import { Chart82 } from '@82chart/vue';
import '@82chart/core/styles.css';
const data = {
labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};
const options = { title: '월별 매출', unit: '원' };
</script>
<template>
<Chart82 type="bar" :data="data" :options="options" @click="(p) => console.log(p)" />
</template><script>
import { Chart82 } from '@82chart/svelte';
import '@82chart/core/styles.css';
const data = {
labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};
</script>
<Chart82 type="bar" {data} options={{ title: '월별 매출', unit: '원' }} />import { Component } from '@angular/core';
import { Chart82Component } from '@82chart/angular';
import type { ChartData, ChartOptions, ChartPoint } from '@82chart/core';
@Component({
selector: 'app-sales',
standalone: true,
imports: [Chart82Component],
template: `<chart-82 type="bar" [data]="data" [options]="options" (pointClick)="onPoint($event)"></chart-82>`,
})
export class SalesComponent {
data: ChartData = {
labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};
options: Partial<ChartOptions> = { title: '월별 매출', unit: '원' };
onPoint(p: ChartPoint) { console.log(p); }
}
// angular.json → "styles": ["node_modules/@82chart/core/dist/styles.css"]<link rel="stylesheet" href="https://82chart.com/cdn/v0.1.0/82chart.css">
<script src="https://82chart.com/cdn/v0.1.0/82chart.min.js"></script>
<chart-82
type="bar"
title="월별 매출"
unit="원"
data='{"labels":["1월","2월","3월"],"series":[{"name":"매출","data":[32000000,41000000,38500000]}]}'
></chart-82>자주 묻는 질문
회사 서비스에 무료로 써도 되나요?
네. MIT 라이선스라 상업용 사이트, 사내 시스템, 납품하는 프로젝트 어디에나 무료입니다. 라이선스 키, 워터마크, 매출 기준, 유료 등급이 없습니다. 라이선스 문구만 함께 두면 됩니다.
인터넷 익스플로러(IE)에서도 되나요?
아니요. 최신 Chrome, Edge, Safari, Firefox, 삼성 인터넷과 그 모바일 브라우저를 지원합니다. IE11은 마이크로소프트도 지원을 끝냈고, 82chart가 쓰는 SVG·ResizeObserver 기능이 없습니다.
파일 크기는 얼마나 되나요?
82chart.min.js 가 gzip 으로 약 30KB, CSS가 약 3KB입니다. 의존성이 없어서 날짜 라이브러리나 jQuery를 따로 받지 않습니다.
축에 만·억 단위를 쓰려면 무엇을 해야 하나요?
아무것도 하지 않아도 됩니다. 페이지가 한국어(<html lang="ko">)이거나 language: 'ko' 면 축은 1.2만·3.4억, 툴팁은 쉼표가 든 전체 숫자입니다. 보고서처럼 "단위: 백만원"을 쓰려면 scale: 1000000, unit: '백만원' 입니다.
이중 y축은 왜 없나요?
단위가 다른 두 값(매출과 주문 수)을 한 그림에 겹치면, 두 축의 범위를 어떻게 잡느냐에 따라 같은 데이터가 "함께 오른다"로도 "엇갈린다"로도 보입니다. 차트가 가장 자주 잘못 읽히는 경우라서 이번 버전에는 넣지 않았습니다. 같은 x를 공유하는 차트 두 개를 위아래로 놓고 group 으로 크로스헤어를 묶는 방법을 권합니다. 다음 버전에서 경고 문서와 함께 직접 켜는 옵션으로 넣을 계획입니다.
점이 몇 개까지 괜찮나요?
수천 개까지는 SVG로 부드럽게 그립니다. 수만 개 이상(센서 로그 등)은 지금은 미리 묶어서(분·시간 평균) 넘기세요. 많은 점을 위한 Canvas 렌더러는 이후 버전 계획에 있습니다.
주식 캔들 차트도 있나요?
코어에는 없습니다. 캔들과 거래량, 이동평균 같은 지표는 코어 위에 얹는 별도 패키지(@82chart/stock)로 준비하고 있습니다.
82chart가 내 데이터를 어딘가로 보내나요?
아니요. 차트 데이터와 방문자 정보는 보내지 않습니다. 하루 한 번 차트가 실행된 도메인과 버전만 82chart.com에 알리며, telemetry: false 로 끌 수 있습니다. localhost, 사내 주소, IP 주소에서는 보내지 않습니다.
To●●t UI Chart 대신 쓸 수 있나요?
네. To●●t UI Chart 저장소는 2026년 9월에 보관(archived) 처리되어 더 이상 고쳐지지 않습니다. 82chart는 같은 한국형 쓰임새(만·억 단위, 한글 라벨, 관리자 대시보드)를 목표로 하고, 옵션 대응표는 To●●t UI Chart에서 옮기기에 있습니다.
Apex●●●rts·Chart.●s와 무엇이 다른가요?
Apex●●●rts는 5.0부터 MIT가 아닌 라이선스로 바뀌었고, Chart.●s는 확대나 주석을 별도 플러그인으로 붙여야 합니다. 82chart는 확대, 크로스헤어, 주석, PNG·SVG·CSV 내보내기, 만·억 단위가 MIT 코어에 모두 들어 있습니다. 자세한 비교는 비교 페이지에 있습니다.
지금 만드는 화면에 넣어 보세요.
가입도 키도 필요 없습니다. 회사 사이트도 무료입니다.
시작하기