Multi tool use

Clash Royale CLAN TAG

How to add extra data in chart.js barchart tooltip

I have a bar chart which i am building with chart.js I am fetching an extra data country wise on the click of the specific bar which is returning me two values

I want to show the data values in the tooltip I have tried mode :label and callbacks of tooltip but not able to so please can someone have an idea how it can be done

buildTheBarChart() {
this.barChartService.getDataForSitesConnected();
this.barChartService.getDataForSitesConnected().then((countryValue: any) => {
this.countryValue = countryValue;
console.log('the response is ' , countryValue[0].countryName);
this.countryNames = ;
this.countOfSites = ;
this.countryIdArray = ;

for (let i = 0 ; i < countryValue.length; i++) {
this.countryNames.push(countryValue[i].countryName);
this.countOfSites.push(countryValue[i].countSites);
this.countryIdArray.push(countryValue[i].countryId);
}

this.sitesCount = this.countOfSites;
// tslint:disable-next-line:radix
this.BarChart = new Chart('barChart', {
type: 'bar',
data: {
labels : this.countryNames,
datasets: [{
label: 'Sites Connected ',
Label: this.countryIdArray,
data: this.sitesCount,
backgroundColor : [
'rgba(234,104,32,1)',
'rgba(20,133,221,1)',
'rgba(156,204,51,1)',
'rgba(234,104,32,1)',
],
borderColor: [ ],
borderWidth: 1
}]
},
options: {
events: ['click'],
onClick: (c, i) => {
// tslint:disable-next-line:prefer-const
let countryLabel;
countryLabel = i[0]._model.label;
this.updateByName = {
'countryName': countryLabel
};
console.log(countryLabel);
this.updatedbarData();
this.barChartService.getDataForConnectedsitesByCountry(this.updateByName).then((sitesValues: any) => {
this.sitesValues = sitesValues;
this.onlineSites = this.sitesValues.online;
this.oflineSites = this.sitesValues.offline;
console.log('the OflineSites are ' , this.onlineSites, this.oflineSites );
});
},

legend: {
display: false,
labels: {
fontColor: 'Black',
fontSize: 16
},
},
title: {
text : 'Total Sites',
display: true,
fontSize: 23,
fontColor: '#000'
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Count',
fontColor: 'black',
fontSize: 20
},
ticks: {
beginAtZero : true,
userCallback: function(label, index, labels) {
if (Math.floor(label) === label) {
return label;
}
},
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Country',
fontColor: 'black',
fontSize: 20

}
}]
}
}
});
});

}


this is my code and in onClick i am fetching data storing in this.oflinesites and this.onlinesites

so please can you help me putting these two values in tooltip

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.