프론트엔드/Javascript
[chart.js] tooltip 선택 시 value, percentage 둘다 표시
작은소행성
2020. 7. 9. 17:54
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
}
반응형