[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',
       }
    }
  }
...

 

출처 : [chart.js] 차트 그래프 내의 value값 표시하기. (tistory.com)

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