자바스크립트 Chart.js Uncaught Error: "undefined" is not a registered controller 에러 해결하기

 

 

안녕하세요.

오늘은 자바스크립트와 Chart.js를 활용해서 차트를 개발하다가 발생할 수 있는 에러인 'Uncaught Error: "undefined" is not a registered controller' 내용에 대해 정리를 하려고 합니다. 먼저 에러가 발생하는 예시 코드를 통해 에러가 발생하는 상황을 확인해 보도록 하겠습니다.

 

---

1. 에러 발생 예시

<!-- Chart.js 라이브러리 import -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {

    /**
     * Chart 설정 및 생성
     */
     new Chart(document.querySelector('.lineChart'), {
        data: {
            labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
            datasets: [
                {
                    label: 'Dataset #1',
                    data: [10, 19, 17, 25, 23, 27],
                    borderColor: '#ff8989',
                    backgroundColor: '#ff8989',
                }
            ],
        },
        options: {
            responsive: true,
        }
     })
});
</script>

<!-- Chart 영역 -->
<canvas class="lineChart"></canvas>

위의 예시 코드를 보게 되면 에러가 발생하기엔 크게 문제는 없어 보입니다. 하지만 위의 코드를 실행하게 되면 에러가 발생하게 되는데요. 실행 결과를 보도록 하겠습니다.

---

실행 결과

위의 실행 결과 화면처럼 에러가 발생을 하였습니다. Chart.js를 사용하다 보면 위와 같은 에러가 종종 발생을 합니다. 에러가 발생하는 원인은 차트의 type을 설정하지 않았을 경우에 발생을 하게 됩니다. 어떤 유형의 차트로 만들지 type을 설정해 주는 값인데 필수값이기 때문에 위와 같은 에러가 발생을 했습니다. 그러면 type을 추가하여 에러가 발생하지 않는지 확인해 보도록 하겠습니다.

 

 

반응형

---

2. 에러 수정 후 예시

변경 전

/**
 * Chart 설정 및 생성
 */
 new Chart(document.querySelector('.lineChart'), {
    data: {
        labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
        datasets: [
            {
                label: 'Dataset #1',
                data: [10, 19, 17, 25, 23, 27],
                borderColor: '#ff8989',
                backgroundColor: '#ff8989',
            }
        ],
    },
    options: {
        responsive: true,
    }
 })

변경 후

/**
 * Chart 설정 및 생성
 */
 new Chart(document.querySelector('.lineChart'), {
    type: 'line',
    data: {
        labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
        datasets: [
            {
                label: 'Dataset #1',
                data: [10, 19, 17, 25, 23, 27],
                borderColor: '#ff8989',
                backgroundColor: '#ff8989',
            }
        ],
    },
    options: {
        responsive: true,
    }
 })

위와 같이 변경 전과 변경 후를 비교해 보면 두 번째 인자값에 type:'line' 설정을 추가하였습니다. 위의 설정은 차트의 유형을 설정하는 값이기 때문에 반드시 넣어줘야 하는 설정값입니다. 실행 결과를 확인해 보도록 하겠습니다.

---

실행 결과

type 설정 추가 후 정상적으로 차트가 출력된 모습입니다. type 설정 하나로 간단하게 해결이 됐습니다.

 

---

마무리

에러 원인

new Chart()를 호출할 때 두 번째 인자값의 필수값인 type을 설정해주지 않으면 'Uncaught Error: "undefined" is not a registered controller' 에러 발생

해결 방안

두 번째 인자값에 type 설정 추가
 - 예시: {
    type: 'line',
    data: { ... },
    options: { ... }
}

 

오늘은 자바스크립트와 Chart.js를 활용한 차트를 구현하다가 발생하는 에러에 대해 정리해 봤습니다. 간단한 설정값 하나로 위의 내용처럼 에러가 발생할 수 있지만 잘 모르는 경우에는 다른 이유라고 생각하고 한참 찾아볼 수 있습니다. 위의 해결 방안처럼 필수값이 빠지진 않았는지 확인을 해보고 간단하게 해결해 보는 것도 좋을 것 같습니다!

 

 

오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다. :)

 

 

---

* Chart.js 공식 사이트

https://www.chartjs.org/

Chart.js