vue에서 Chart.js 사용하기. ["pie" is not a registered controller.]

사이드 프로젝트 진행중에 원형 차트를 사용하고 싶어서, 인터넷에 조금 찾아봤다.

그랬더니 많은 사람들이 chart.js를 사용하고 있었다.

해당 라이브러리를 사용하면 편하게 쓸 수 있을 것 같아서 사용하기로 했다.

1. Chart.js 설치하기

npm install chart.js

2. Component 만들기 [ Composition API 사용 ]

<script setup>

import {onMounted} from "vue";
import {Chart} from "chart.js/auto";

//html 요소를 찾아서 처리해야 하므로, onMounted에 올려서 사용해야 함
onMounted(() => {
  const chartElement = document.querySelector('#chartCanvas').getContext('2d');
  const chartCanvas = new Chart(chartElement, {
    type: 'pie',
    data: {
      labels: ['게임', '메신저', '엔터테인먼트', '소셜', '기타'],
      datasets: [{
        data: [23.3, 22.4, 19.4, 13.4, 13.2],
        backgroundColor: ['#1E90FF', '#FFD700', '#32CD32', '#FF4500', '#6A5ACD'],
        hoverOffset: 4
      }]
    },
    options: {
      plugins: {
        title: {
          display: true,
          text: '일과 통계',
          font: {
            size: 20
          }
        },
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            font: {
              size: 15
            }
          }
        }
      },
      responsive: true,
      maintainAspectRatio: false
    }
  });
});
</script>

<template>
  <div class="chart-wrapper">
    <canvas id="chartCanvas"></canvas>
  </div>
</template>

<style scoped>
.chart-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  width: 557px;
  height: 370px;

  padding: 0 10px;
}

canvas {
  border: 1px solid black;
  width: 330px;
  height: 330px;
}

</style>

이렇게 하면 정상적으로 코드가 떴어야 하는데,

"pie" is not a registered controller.

자꾸 에러가 발생했다.

찾아 보니 import 할 때 import {Chart} from "chart.js/auto"; 이렇게 했어야 했는데, 내가 /auto를 내가 빼먹고 import {Chart} from "chart.js로 입력해서 문제가 발생했다.