본문 바로가기
프론트엔드/Javascript

[chart.js] tooltip 선택 시 value, percentage 둘다 표시

by 작은소행성 2020. 7. 9.

 

chartjs 를 이용해서 차트를 표현하는데 아래 이미지와 같이 

tooltip에 value와 percentage를 둘 다 표시하고자 한다.

 

 

 

 

 

 

options : {
	 tooltips : {
		callbacks : {
			label : function(tooltipItem, data){		
				var dataset = data.datasets[tooltipItem.datasetIndex];
				var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array){
					return previousValue + currentValue;
				});
				var currentValue = dataset.data[tooltipItem.index];
				var percentage = Math.floor(((currentValue/total) * 100)+0.5);						
				return data['labels'][tooltipItem['index']] + " : " + currentValue + " ("+ percentage+"%)" ;           
			},
		}
	},//tooltips
 }

 

 

 

 

 

 

반응형