Tooltips by Regaddi · Pull Request #51 · chartjs/Chart.js
I implemented some basic tooltips, which show (if defined) the label and value onmouseover.
Every tooltip can be registered by a configurable area:
Tooltip Defaults can be overwritten by adding a 2nd parameter to the "new Chart()" function, i.e.
var myChart = new Chart(context, { background: 'black', fontColor: 'white' });
tooltipDefaults = {
background: 'rgba(0,0,0,0.6)',
fontFamily : "'Arial'",
fontStyle : "normal",
fontColor: 'white',
fontSize: '12px',
padding: {
top: 10,
right: 10,
bottom: 10,
left: 10
},
offset: {
left: 0,
top: 0
},
border: {
width: 0,
color: '#000'
}
}
The tooltip moves relative to the current mouse cursor position and shows only, if hovering a valid chart point or area.
Tooltips can be disabled via specific chart option "showTooltips" i.g.
myChart.Pie(pieChartData, { showTooltips: false });
They can be styled individually and do right now a basic job:
Showing the hovered label and value.