Frameworks
사용 중인 스택에서 바로 시작하세요.
Core를 바탕으로 웹 프레임워크별 패키지를 제공합니다.
| 스택 | 패키지 | 비고 |
|---|---|---|
| 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 등 일부 차트만 지원합니다. 지원 차트는 문서에서 확인하세요.
Install
패키지 설치 후 바로 사용하세요.
프로젝트의 프레임워크에 맞는 패키지를 선택하세요.
React
pnpm add @designbasekorea/easy-chart-reactVue
pnpm add @designbasekorea/easy-chart-vueVanilla JS
pnpm add @designbasekorea/easy-chartReact Native
pnpm add @designbasekorea/easy-chart-react-native react-native-svgCode Examples
원하는 방식으로 연결하세요.
Vanilla JS부터 컴포넌트 프레임워크까지 사용 예제를 확인할 수 있습니다.
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"
}
}
});FAQ