javascript - chart.js v2: how to add tooltips of metadata? -
i want add metadata each tooltips.
data is
x.label=['jan.', 'feb.','mar.','apr.','may','jun'] x.data=[-30,-24,-10,4,12,15] x.metadata=['extrmely cold','exreme cold too','mostlry spring','spring has come!', 'sakura blooming' ,'hot!']
when click (apr., 4) tooltip shows
'apr., 4°c \n spring has come!'
how can edit tooltip function?
this works me. created array (myarr variable) tooltip.callbacks.label function, , appended return value. think, if put x.metadata values myarr, works.
var options = { tooltips: { enabled:false, callbacks:{ label: function(tooltipitem, data) { var myarr = [11,22,33,44,55] var datasetlabel = data.datasets[tooltipitem.datasetindex].label || ''; //this tooltip.body return datasetlabel + ': ' + tooltipitem.ylabel +' :'+ myarr[tooltipitem.index]; }, }, custom: function(tooltip) { var tooltipel = $('#chartjs-tooltip'); if (!tooltip) { tooltipel.css({ opacity: 0 }); return; } if (typeof tooltip.body != 'undefined') { var bodytext = tooltip.body[0].split(":"); var innerhtml = '<span class="chartjs-tooltip-header"><b>'+tooltip.title[0]+'</b></span><br>' +'<span>' + bodytext[0].trim() + '</span> : <span><b>' + bodytext[1].trim() +'</b></span>' +'<span>' + bodytext[2].trim() + '</span>'; tooltipel.html(innerhtml); tooltipel.css({ opacity: 1, left: (tooltip.xpadding * 3) + tooltip.x + 'px', top: (tooltip.ypadding * 3) + tooltip.y + 'px', }); } } } };
Comments
Post a Comment