I'm using chart.js v2 for create a chart, and get the data from database.
I want to change the tooltips title from id_office[] into name_office[] or if it's not possible, add new label : name_office[] into tooltips information.
for now the tooltips only show id_office[] and bpu[] data.
here is my code
function chart_dashboard(data) {
var bpu = [];
var id_office = [];
var name_office = [];
for (i = 0; i < data.list_chart_dashboard.length; i++) {
var obj = data.list_chart_dashboard[i];
bpu.push(obj.penambahan_TK_BPU);
id_office.push(obj.id_office);
name_office.push(obj.name_office);
}
var chartdata = {
labels: id_office,
datasets : [{
label: 'BPU',
backgroundColor: [
'rgba(114, 12, 34, 0.2)'
],
borderColor: 'rgba(32,99,12,1)',
hoverBackgroundColor: 'rgba(34, 45, 50, 0.2)',
hoverBorderColor: 'rgba(89, 162, 134)',
borderWidth:1,
data: bpu
}]
};
var ctx = $("#chart_dashboard")[0].getContext('2d');
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
// Configuration options go here
options: {
responsive: true,
"hover": {
"animationDuration": 0
},
"animation": {
"duration": 1,
"onComplete": function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
tooltips: {
"enabled": true
},
scales: {
xAxes: [{
}],
yAxes: [{
ticks: {
beginAtZero: true,
fontSize: 10,
//max: 300
//stepSize: 10
},
scaleLabel: {
display: true,
labelString: "employee BPU"
}
}]
}
}
});
}
So the tooltips become
id_office, name_office, bpu
Thank you for your help and sorry for my bad english.