웹사이트나 대시보드에서 데이터를 시각적으로 표현할 때, 차트 라이브러리는 매우 유용한 도구입니다.
이번 글에서는 많은 분들이 사용하는 Chart.js의 기본 사용법과 반응형 대응 방법,
그리고 Google Charts와의 차이점까지 자세히 알아보겠습니다.
1. Chart.js란?
Chart.js는 HTML5 <canvas> 요소를 기반으로 다양한 종류의 차트를 구현할 수 있는 오픈소스 JavaScript 라이브러리입니다.
깔끔한 디자인, 간편한 설정, 가벼운 용량 덕분에 퍼블리셔와 프론트엔드 개발자 모두에게 인기 있는 라이브러리입니다.
- 대표 특징:
- 가볍고 빠름
- 다양한 차트 유형 지원 (bar, line, pie 등)
- 커스터마이징 쉬움
- 반응형 기본 지원
2. Chart.js CDN으로 불러오기
설치 없이 바로 사용하려면 CDN을 사용하는 것이 가장 간편합니다.
아래 스크립트를 <head> 또는 <body> 하단에 삽입해 주세요.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>3. 차트 출력 마크업 작성하기
차트를 출력할 HTML 요소는 <canvas> 태그를 사용합니다.
<canvas id="myChart" width="400" height="200"></canvas>4. 기본 차트 생성 예제
아래는 바 차트(bar chart)를 생성하는 기본 예제입니다.
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: '투표 수',
data: [12, 19, 3, 5],
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
5. 반응형 차트 적용 방법
Chart.js는 기본적으로 반응형(responsive)을 지원합니다.
아래와 같이 <div>로 감싸고 max-width를 지정하면, 화면 크기에 따라 유연하게 대응됩니다.
<div style="width: 100%; max-width: 800px;">
<canvas id="responsiveChart"></canvas>
</div>const chart = new Chart(document.getElementById('responsiveChart').getContext('2d'), {
type: 'line',
data: {
labels: ['1월', '2월', '3월', '4월'],
datasets: [{
label: '매출',
data: [300, 450, 400, 600],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});6. 화면 크기에 따른 옵션 분기 처리
window.innerWidth나 matchMedia()를 활용해 모바일 환경에서 옵션을 다르게 설정할 수 있습니다.
const isMobile = window.innerWidth < 768;
const options = {
plugins: {
legend: {
display: !isMobile // 모바일에서는 범례 숨김
}
}
};7. 자주 사용하는 옵션 예시
7.1. 제목 설정
plugins: {
title: {
display: true,
text: '월별 매출 분석'
}
}7.2. 범례 제거
plugins: {
legend: {
display: false
}
}7.3. 툴팁 비활성화
plugins: {
tooltip: {
enabled: false
}
}8. Chart.js와 Google Charts 차이점 비교
| 항목 | Chart.js | Google Charts |
|---|---|---|
| 렌더링 방식 | <canvas> 기반 |
SVG 기반 |
| 디자인 커스터마이징 | 매우 유연함 | 제한적임 |
| 라이브러리 크기 | 가벼움 (60KB 이하) | 상대적으로 무거움 |
| 반응형 지원 | 기본 내장 | 수동 설정 필요 |
| 외부 API 의존도 | 없음 | Google API 사용 필요 |
| 상용 사용 | MIT 라이선스 (자유) | 무료이나 Google 정책 영향 받음 |
👉 정적인 데이터 시각화에는 Google Charts,
👉 반응형·커스터마이징이 중요한 프로젝트에는 Chart.js를 추천드립니다.
혹시 아직 Google Charts 사용법이 궁금하신 분들은
아래 포스팅을 참고해 보세요.
기본 사용법부터 반응형 적용 방법까지 예제 중심으로 설명드렸습니다.
👉 Google Charts 사용법과 반응형 차트 구현 방법 보러가기
9. 다양한 차트 유형
Chart.js는 다음과 같은 차트를 지원합니다.
- Bar (막대)
- Line (선형)
- Pie / Doughnut (원형)
- Radar (레이더)
- Polar Area
- Bubble / Scatter (산점도)
각 차트는 type 속성만 변경하면 쉽게 바꿀 수 있습니다.
10. 참고 자료
'Tech > JavaScript' 카테고리의 다른 글
| 세로형 섬네일 갤러리 구현 / Gallery with Thumbnail Slider (Vertical) / Swiper - Thumbs gallery (Vertical) (0) | 2025.04.12 |
|---|---|
| Swiper 내부 영역 클릭 시, 의도하지 않은 슬라이드 이벤트가 발생하는 현상 해결하기 (1) | 2023.10.11 |
| 모바일 터치 이벤트를 따라다니는 요소 만들기 mobile touchmove event의 offset 값을 따라다니는 element 만들기 (0) | 2023.09.12 |
| position: sticky 요소가 stuck일 경우에만 CSS를 적용하는 방법 (0) | 2023.09.05 |
| Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기 (0) | 2023.08.30 |
