Chart.js

Chart.js

Chart.js는 HTML5 캔버스 요소를 이용하여 다양한 형태의 차트를 그릴 수 있도록 지원하는 오픈소스 JavaScript 라이브러리이다. MIT 라이선스로 배포되며, 웹 애플리케이션 및 대시보드 등에서 데이터 시각화 도구로 널리 활용된다.

주요 특징

1. 다양한 차트 타입
   • 라인 차트, 바 차트, 파이 차트, 도넛 차트, 레이더 차트, 폴라 에어리어 차트, 버블 차트 등 8가지 이상의 기본 차트 유형을 제공한다.
2. 반응형 디자인
   • 캔버스 크기에 따라 자동으로 차트를 재렌더링하여 화면 크기에 적응한다.
3. 플러그인 구조
   • 플러그인 API를 통해 툴팁, 레전드, 애니메이션 등 추가 기능을 손쉽게 확장할 수 있다.
4. 경량성
   • 핵심 라이브러리의 압축(minified) 파일 크기가 약 150 KB 정도로 비교적 가볍다.
5. 다양한 데이터 포맷 지원
   • JSON, 배열, 객체 형태의 데이터를 직접 입력하거나, 외부 데이터 소스(API)와 연동하여 실시간 차트를 구현할 수 있다.

개발 및 유지보수

• 최초 개발자는 영국 출신 개발자 Nick Downie이며, 최초 공개는 2014년 5월이다.
• 현재는 다수의 기여자와 유지보수자가 GitHub(https://github.com/chartjs/Chart.js) 리포지터리를 통해 지속적으로 업데이트하고 있다.
• 주요 버전으로는 2.x, 3.x, 4.x가 있으며, 최신 안정화 버전은 2024년 기준 4.4.0(출시일: 2024‑03‑15)이다.

사용 예시

<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['January', 'February', 'March', 'April'],
      datasets: [{
        label: 'Sales',
        data: [12, 19, 3, 5],
        backgroundColor: 'rgba(54, 162, 235, 0.5)'
      }]
    },
    options: {
      responsive: true
    }
  });
</script>

위와 같이 HTML에 <canvas> 요소와 Chart.js 스크립트를 포함하면, JavaScript 코드만으로 차트를 손쉽게 생성할 수 있다.

참고 문헌

• Chart.js 공식 웹사이트: https://www.chartjs.org/
• GitHub 리포지터리: https://github.com/chartjs/Chart.js (라이선스, 릴리즈 기록 등 확인 가능)

해당 내용은 공개된 문서와 공식 자료에 근거한 객관적인 설명이다.