[chart.js] 차트 그래프 내의 value값 표시하기.

차트 js를 사용하다보면 차트 내에서 해당 값이 어떤지 표시할 필요가 있다.

 

시안성 측면에서 매우 유리하니까.

그런데, 이게 기능구현이 매우 어려웠다.

왜 안되나 했더니 이게 확장 라이브러리로 지원하는 기능이었네?

 

사용방법은 3번째 링크를 참조하자.

대충 공식문서를 보면 plugins 코드 안에 설정하고, data 객체에도 따로 넣어주면 된다.

하지만 3번째 링크보면 더 자세히 설명되어 있다.

 

Chart.defaults.set('plugins.datalabels', {
  color: '#FE777B'
});

var chart = new Chart(ctx, {
  options: {
    plugins: {
      // Change options for ALL labels of THIS CHART
      datalabels: {
        color: '#36A2EB'
      }
    }
  },
  data: {
    datasets: [{
      // Change options only for labels of THIS DATASET
      datalabels: {
        color: '#FFCE56'
      }
    }]
  }
});

 

첫번째 링크는 너무 옛날 코드라 라이브러리가 분리되기전 코드였다.

그렇기에 현재는 안되는 사장된 코드.

https://risha-lee.tistory.com/11

chart.js에서 그래프 위에 값 그리는 법

 

최신형 3.x가 지원되는 라이브러리

https://chartjs-plugin-datalabels.netlify.app/

chartjs-plugin-datalabels

https://jsp-making.tistory.com/459

chartjs-plugin-datalabels 그래프 모든 라벨 동시에 표시

 

var chart = new Chart(ctx, {
  ...,
  plugins:[ChartDataLabels], // 이거 그대로 복사해서 붙여 넣으세요.. ^^;
  data:{
    datasets: [{
      data: ...,
      datalabels:{
        color:'black',         // 너무 흐리다 싶어서 잘 보이도록 완전히 검게..
                                // 배경색을 어떻게 세팅했냐에 따라 적절히..
        font:{size:24}        // pixel 단위이고, 수치로 입력
      }
    }],
    labels:[ ... 여기에 화면에 표시되는 라벨을 세팅 .. ] // formatter 의 context.chart.data.labels[idx]
  },
  ...,
  options:{
    plugins:{
      datalabels:{
        formatter:function(value,context){
          // data 에 넣은 데이타 순번. 물론 0 부터 시작
          var idx = context.dataIndex;
          // 여기선 첫번째 데이타엔 단위를 '원' 으로, 그 다음 데이타엔 'P' 를 사용
          // addComma() 는 여기서 기술하지 않았지만, 천단위 세팅. ChartJS 의 data 엔 숫자만 입력
          return context.chart.data.labels[idx]+ ' ' +addComma(value)+ (idx==0 ? '원' : 'P');
        }
      }
    }
  }
};

그런데, 도넛 그래프의 경우..
값이 0 이거나, 다른 항목에 비해 상대적으로 극미한 값인 경우..
canvas 경계선에서 해당 라벨이 잘려지는 상황이 발생하는데,
이 때에는.. 아래와 같이 해 줍니다. (다른 옵션으로도 가능하긴 하겠지만..)
...
  options:{
    plugins:{
      datalabels:{
        align:'top',
       }
    }
  }
...