Chartjs 사용하면서 숫자에다가 3자리 마다 ,(comma) 설정하는 방법

차트JS를 사용하다보면 차트를 작성하게 되고, 작성된 차트에 숫자를 표기하게 되는 경우가 많다.

하지만, 일반적인 자바스크립트 방식으로 콤마를 찍게 되면 차트가 로딩이 안되는 현상이 발생한다.

 

처음에는 자바스크립트에서 가능한 기능들을 사용했다.

하지만, 일반적인 자바스크립트 방식으로 콤마를 찍게 되면 차트가 로딩이 안되는 현상이 발생한다.

const n1 = 12345.678;
const cn1 = n1.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")
 
console.log('cn1 : ', cn1)
 
 
const n2 = 12345.678;
const cn2 = n2.toLocaleString('ko-KR')
 
console.log('cn2 : ', cn2)

 

심지어 출력은 잘되지만, 적용되지 않았다.

출력

 

 

해결방법

1) 밑에 사진처럼 막대형 데이터 차트에 적합하다.

2) 인덱스의 위치를 chartjs에 내장된 동적 인덱스 위치로 대체한다.

tooltips: {
            enabled: true,
            mode: "single",
            callbacks: {
              title: function(tooltipItems, data) {
                return tooltipItems[0].label.replaceAll(",", "");
              },
              label: function (tooltipItem, data) {
                const tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                console.log('tooltipValue : ', tooltipValue)
                return parseInt(tooltipValue, 10).toLocaleString();
              }           
            }
          },

 

 

그러면 밑에 사진처럼 변경이 된다.