Easy Chart 오픈소스
@designbasekorea/easy-chart
디자인 품질은 유지하고, 차트 구현 시간은 줄이세요.
랜딩·대시보드·어드민·리포트 등 어디서든 쓸 수 있는 Vanilla JS 차트 라이브러리입니다. 복잡한 옵션 없이 preset과 data만 넘기면 아래처럼 바로 렌더됩니다.
npm 패키지 또는 esm.sh CDN으로 빌드 없이 시작할 수 있습니다.
Stacked
Line
Activity Ring
Radar
Candlestick
Grouped
Cohort
RSI
Easy Chart란?
프로덕트·대시보드·랜딩·어드민에서 자주 쓰는 차트를 가볍고 일관된 API로 제공합니다. 디자이너가 정한 색·간격·톤을 theme과 preset으로 맞추고, 개발자는 data와 type만 넘기면 됩니다.
테마 중심
preset + theme 오버라이드로 브랜드 컬러와 톤을 일관되게 맞출 수 있습니다.
타입별 컴포넌트
EasyBarChart, EasyLineChart, EasyDonutChart 등 차트 타입별 API를 제공합니다.
멀티 스택
Vanilla JS, React, Vue, React Native까지 같은 테마 시스템으로 사용합니다.
풍부한 차트
Bar, Line, Area, Pie, Donut, Radar, Gauge, Candlestick, RSI, Cohort 등 30+ 타입.
문서 · 플레이그라운드
타입별 예제와 테마 미리보기, 코드 복사로 바로 프로젝트에 적용할 수 있습니다.
npm 공개 패키지
@designbasekorea 스코프로 Core부터 프레임워크 래퍼까지 설치할 수 있습니다.
지원 스택
Core를 기준으로 Vanilla JS, React, Vue, React Native 패키지를 제공합니다.
| 스택 | 패키지 | 비고 |
|---|---|---|
| Core |
@designbasekorea/easy-chart-core
|
SVG 렌더러·테마·타입 |
| Vanilla JS |
@designbasekorea/easy-chart
|
Core re-export |
| React |
@designbasekorea/easy-chart-react
|
React 18+ |
| Vue |
@designbasekorea/easy-chart-vue
|
Vue 3 |
| React Native |
@designbasekorea/easy-chart-react-native
|
일부 차트만 지원 (문서 참고) |
React Native는 Bar·Line·Area 등 일부 차트만 지원하며, Pie·Donut·Radar는 웹 패키지를 사용하세요.
설치
사용하는 스택에 맞는 패키지를 설치하세요.
React
pnpm add @designbasekorea/easy-chart-react
Vue
pnpm add @designbasekorea/easy-chart-vue
Vanilla JS
pnpm add @designbasekorea/easy-chart
React Native
pnpm add @designbasekorea/easy-chart-react-native react-native-svg코드 예시
Vanilla JS + CDN으로 어디서든 바로 시작할 수 있습니다. 아래 예시를 복사해 사용하세요.
Vanilla JS (CDN)
<div id="easy-chart-demo" style="width:100%;height:320px"></div>
<script type="module">
import { EasyChart } from "https://esm.sh/@designbasekorea/easy-chart";
new EasyChart("#easy-chart-demo", {
type: "bar",
preset: "minimal",
rounded: true,
tooltip: true,
legend: true,
responsive: true,
data: [
{ label: "1월", value: 120 },
{ label: "2월", value: 180 },
{ label: "3월", value: 140 }
]
});
</script>
HTML 마크업
<script type="application/json" id="chart-data">
[{"label":"1월","value":120},{"label":"2월","value":180}]
</script>
<div id="my-chart" style="width:100%;height:320px"></div>
<script type="module">
import { EasyChart } from "https://esm.sh/@designbasekorea/easy-chart";
const data = JSON.parse(document.getElementById("chart-data").textContent);
new EasyChart("#my-chart", { type: "bar", preset: "minimal", data });
</script>
테마 커스텀
new EasyChart("#chart", {
type: "bar",
preset: "minimal",
data: [...],
theme: {
colors: {
primary: "#2563eb",
secondary: "#60a5fa",
background: "#ffffff"
}
}
});