topic★★★★★난이도

Chart.js — 인터랙티브 차트

Canvas 기반 차트 라이브러리. bar, line, pie, doughnut 등 다양한 차트를 몇 줄로 완성.

#Chart.js#시각화#Canvas#대시보드
왜 배우는가

데이터 시각화는 거의 모든 웹 프로젝트에 필요하다. Chart.js는 설정 하나로 반응형·인터랙티브 차트를 그릴 수 있어 웹 대시보드의 기본 도구로 자리잡았다.

Chart.js는 웹 대시보드의 기본 도구다. 엑셀에서 차트 버튼 누르듯, JavaScript에서 데이터 배열만 넘기면 예쁜 차트가 Canvas 위에 렌더링된다. 호버 시 툴팁, 클릭 이벤트, 애니메이션까지 기본 내장.

Chart.js — Canvas 위에 bar·line·pie·doughnut 차트를 렌더링하는 인터랙티브 구조
막대 차트 — 데이터 배열을 바의 높이로 시각화하는 기본 차트 패턴
용도설명
막대 차트카테고리별 수량 비교 (매출, 투표 결과)
꺾은선 차트시간에 따른 추이 (주가, 기온 변화)
파이/도넛 차트비율 표시 (시장 점유율, 설문 결과)
레이더 차트다차원 비교 (스킬 트리, 성능 분석)
javascript
// npm install chart.js
import { Chart } from "chart.js/auto";

new Chart(document.getElementById("myChart"), {
  type: "bar",
  data: {
    labels: ["1월", "2월", "3월"],
    datasets: [{ label: "매출(만원)", data: [120, 190, 150] }],
  },
});

`npm install chart.js` 후 canvas 요소에 바인딩하면 끝. `type`을 `line`, `pie`, `doughnut` 등으로 바꾸면 차트 종류가 변경된다.

Claude Code 팁: "매출 데이터를 bar 차트로 보여줘"라고 지시하면 Chart.js 코드를 즉시 생성한다. 색상, 범례, 애니메이션 옵션도 자연어로 조정 가능.