자바스크립트 Failed to create chart: can't acquire context from the given item 에러 해결하기 (chart.js 에러)

 

 

안녕하세요.

오늘은 자바스크립트와 chart.js를 연동하여 차트를 만들다 보면 발생할 수 있는 에러인 'Failed to create chart: can't acquire context from the given item'에 대한 내용과 해결 방안을 정리해 보려고 합니다. 에러 내용은 차트를 생성하기 위해 DOM 요소를 호출할 때 DOM 요소가 맞지 않는 경우에 발생하는 에러입니다.

 

---

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'), {
        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,
        }
     })
});
</script>

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

위의 예시 소스 코드를 보게 되면 크게 문제가 되보이진 않습니다. 하지만 위의 코드는 에러가 발생하고 있습니다. 에러가 발생하는 이유는 new Chart() 함수를 사용할 때 첫 번째 인자값은 만들고자 하는 DOM 요소를 입력해야 하는데, Chart.js는 canvas 요소를 기준으로 차트를 그리고 있습니다. 그런데 위처럼 div 요소를 기준으로 차트를 생성하게 되면 에러가 발생하게 됩니다.

 

실행 결과

위의 실행 결과처럼 차트를 그리지 못하고 에러가 발생하였습니다. 그래서 위와 같은 상황에 에러가 발생을 하면 선택한 요소를 먼저 확인하고 변경을 해주면 됩니다.

 

 

반응형

---

2. 소스 수정 후 예시

변경 전

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

변경 후

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

위의 예시처럼 div 요소를 canvas 요소로 변경해 주면 됩니다.

---

실행 결과

DOM 요소만 canvas로 변경해준 후 위와 같이 차트가 정상적으로 만들어진 모습입니다.

 

---

마무리

에러 원인

new Chart() 함수를 실행할 때 첫 번째 인자값에 요소를 잘못 넣었을 경우 에러 발생

해결 방안

선택한 요소를 <canvas></canvas> 요소로 변경

 

오늘은 자바스크립트와 Chart.js를 활용하여 차트를 개발하다가 발생할 수 있는 에러 'Failed to create chart: can't acquire context from the given item' 내용에 대해 정리해 봤습니다. 에러 내용을 조금 해석하고 찾아보면 간단하게 해결할 수 있지만 잘 모르고 헷갈리면 또 오래 걸릴 수 있는 내용일 것 같습니다. 위와 같은 에러가 발생했을 경우에는 가장 먼저 선택한 요소가 어떤 것인지 오타는 없는지 먼저 확인해 보고 에러를 잡아가면 좋을 것 같습니다!

요즘에는 Chart.js를 기반으로 공부를 하고 포스팅을 하다 보니 위와 같이 에러들을 많이 만나고 있습니다. 저 또한 한번 보고 나중에 기억하기 힘들 수 있어서 이렇게 글로 정리를 했습니다. 다음에도 이어서 Chart.js의 유사한 에러들을 포스팅하도록 하겠습니다.

 

 

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

 

 

---

* Chart.js 공식 사이트

https://www.chartjs.org/

Chart.js