<template>
  <Line :data="chartData" :options="options" />
</template>

<script setup lang="ts">
import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'

// 필요한 컴포넌트만 등록
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)

const chartData = {
  labels: ['January', 'February', 'March'],
  datasets: [{
    label: 'Sales',
    data: [40, 20, 12],
    borderColor: 'rgb(75, 192, 192)',
  }]
}

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
  }
}
</script>

보시다시피 필요한 요소만 등록해서 쓸 수 있습니다. 번들 크기 최적화에 유리하죠.

언제 쓰면 좋을까?

일반적인 라인/바/파이 차트가 주 목적일 때
번들 크기에 민감한 SPA 프로젝트
빠른 프로토타이핑이 필요할 때
팀에 주니어 개발자가 많을 때

2. Apache ECharts - 강력한 올라운더

GitHub Stars: 60k+ | 라이선스: Apache 2.0 | Vue 래핑: vue-echarts

npm install echarts vue-echarts

특징

ECharts는 중국 알리바바에서 만든 차트 라이브러리입니다. "기능이 많다"는 게 가장 큰 특징이에요.

강점:

차트 종류가 정말 다양합니다. (히트맵, 트리맵, 지도 등)
Tree-shaking을 지원해 필요한 차트만 번들에 포함할 수 있습니다.
대량 데이터 렌더링 성능이 뛰어납니다.
생태계가 크고, 중국어/영어 커뮤니티 모두 활성화되어 있습니다.
무료입니다.

약점:

공식 문서가 Chart.js보다는 덜 직관적입니다.
옵션 구조가 복잡해서 처음엔 진입 장벽이 있습니다.
기본 번들 크기가 큽니다. (하지만 tree-shaking으로 해결 가능)

사용 예시

<template>
  <v-chart :option="option" autoresize />
</template>

<script setup lang="ts">
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'

// 필요한 컴포넌트만 등록
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
])

const option = {
  title: {
    text: 'Sales Chart'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [150, 230, 224, 218, 135],
    type: 'line'
  }]
}
</script>

옵션 객체가 Chart.js보다 좀 더 계층적입니다. 이게 처음엔 복잡해 보이지만, 익숙해지면 오히려 직관적이에요.

언제 쓰면 좋을까?

다양한 차트 타입이 필요할 때
대량 데이터를 다뤄야 할 때
복잡한 인터랙션이 필요한 대시보드
지도 차트나 특수 차트가 필요할 때

3. Highcharts - 엔터프라이즈급 선택

GitHub Stars: 12k+ | 라이선스: 유료* | Vue 래핑: highcharts-vue

npm install highcharts highcharts-vue

*개인/비영리는 무료, 상업용은 라이선스 구매 필요

특징

Highcharts는 오랜 역사를 가진 검증된 라이브러리입니다. "돈 내고 쓰는 만큼 확실하다"가 핵심이에요.

강점:

브라우저 호환성이 탁월합니다. (IE 6까지 지원)
접근성(Accessibility) 기능이 뛰어납니다.
공식 지원이 있어 문제 발생 시 빠른 대응이 가능합니다.
모듈화가 잘 되어 있습니다.
문서와 예제가 풍부합니다.

약점:

상업용은 유료입니다. (연간 라이선스 비용)
무료 라이브러리 대비 커뮤니티가 작습니다.

사용 예시

<template>
  <highcharts :options="chartOptions" />
</template>

<script setup lang="ts">
import { Chart } from 'highcharts-vue'

const chartOptions = {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Monthly Sales'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  yAxis: {
    title: {
      text: 'Revenue'
    }
  },
  series: [{
    name: 'Sales',
    data: [1, 3, 2, 4, 5]
  }]
}
</script>

언제 쓰면 좋을까?

엔터프라이즈 프로젝트 (예산 확보 가능)
레거시 브라우저 지원이 필수일 때
접근성 준수가 중요할 때
공식 기술 지원이 필요할 때

4. uPlot - 성능 극한 최적화

GitHub Stars: 9k+ | 라이선스: MIT | Vue 래핑: 없음 (직접 래핑)

npm install uplot

특징

uPlot은 "성능"에만 집중한 초경량 라이브러리입니다. 번들 크기가 45KB밖에 안 됩니다.

강점:

번들 크기가 정말 작습니다.
대량 데이터 렌더링 성능이 최고 수준입니다.
메모리 사용량이 적습니다.

약점:

차트 종류가 라인/바 정도로 제한적입니다.
Vue 공식 래핑이 없어 직접 래핑해야 합니다.
커스터마이징이 상대적으로 어렵습니다.
생태계가 작습니다.

사용 예시

<template>
  <div ref="chartEl"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import uPlot from 'uplot'
import 'uplot/dist/uPlot.min.css'

const chartEl = ref<HTMLDivElement>()

onMounted(() => {
  if (!chartEl.value) return

  const data = [
    [0, 1, 2, 3, 4],  // x values
    [10, 20, 15, 25, 30]  // y values
  ]

  const opts = {
    width: 800,
    height: 400,
    series: [
      {},
      {
        stroke: 'blue',
        label: 'Sales'
      }
    ]
  }

  new uPlot(opts, data, chartEl.value)
})
</script>

직접 래핑해야 하는 게 번거롭긴 하지만, 코드 자체는 간단합니다.

언제 쓰면 좋을까?

실시간 데이터 스트리밍 차트
모바일 최적화가 중요할 때
수만 개 이상의 데이터 포인트를 다룰 때
번들 크기를 극한으로 줄여야 할 때

비교 정리

	Chart.js	ECharts	Highcharts	uPlot
번들 크기	중간 (tree-shaking 가능)	큼 (tree-shaking 가능)	중간	매우 작음
차트 종류	기본	매우 다양	다양	제한적
성능	중간	좋음	좋음	최고
학습 곡선	쉬움	중간	중간	어려움
생태계	매우 큼	큼	중간	작음
가격	무료	무료	유료*	무료
Vue 래핑	vue-chartjs	vue-echarts	highcharts-vue	없음
추천 용도	일반 SPA	대시보드	엔터프라이즈	실시간 스트리밍

실무 경험에서 우러난 조언

우리 팀에서는 최근 프로젝트에서 Chart.js를 주로 사용했습니다.

선택 이유는 간단했어요. 라인/바 차트가 전부였고, 번들 크기가 중요했고, 팀에 차트 라이브러리 경험이 적은 분들이 계셨거든요. Chart.js는 이 모든 조건을 만족했습니다.

다만 한 가지 아쉬운 점은, 나중에 복잡한 히트맵이 필요해졌을 때 Chart.js로는 구현이 어려웠다는 거예요. 그때는 해당 화면만 ECharts를 추가로 사용했습니다.

처음부터 “모든 걸 다 할 수 있는” 라이브러리를 선택하려고 하기보다는, 지금 당장 필요한 게 뭔지를 먼저 파악하는 게 중요한 것 같습니다.

마치며

차트 라이브러리 선택은 정답이 없습니다. 프로젝트마다, 팀마다 우선순위가 다르니까요.

다만 이 글이 여러분의 의사결정에 조금이나마 도움이 되었으면 합니다.

간단한 선택 가이드:

🎯 일반적인 프로젝트 → Chart.js
🚀 다양한 차트 필요 → ECharts
💼 엔터프라이즈 프로젝트 → Highcharts
⚡ 극한의 성능 필요 → uPlot