In chart.js I want to customize tooltips label with an string array. tried it in different ways but can't get my desired result. it is not replacing all the labels instead it shows all the array values in each data sets tooltips.I also tried for loop. here is the code pen link: without loop: with loop:
var tooltipsLabel = ['Dhaka','Rajshahi','NewYork','London']
var chartList = [5,6,7,8];
function chart(){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue","green","Yellow"],
datasets: [{
label: '# of Votes',
data: chartList,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
tooltips: {
mode: 'index',
intersect: true,
callbacks: {
title: function (tooltipItem, data) {
for(var i = 0; i < data.labels.length; i++)
{
return tooltipsLabel[i];
}
}
}
}
}
});
}
chart();
<html>
<head>
<script src=".js/2.7.1/Chart.bundle.min.js"></script>
<link href=".3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-lg-4">
<canvas id="myChart" width="100" height="100"></canvas>
</div>
<div class="col-lg-4"><canvas id="pieChart" width="100" height="100"></canvas></div>
</div>
<script>
</script>
</body>
</html>In chart.js I want to customize tooltips label with an string array. tried it in different ways but can't get my desired result. it is not replacing all the labels instead it shows all the array values in each data sets tooltips.I also tried for loop. here is the code pen link: without loop: https://codepen.io/tumulalmamun/pen/yvNaKY with loop: https://codepen.io/tumulalmamun/pen/oEXzaq
var tooltipsLabel = ['Dhaka','Rajshahi','NewYork','London']
var chartList = [5,6,7,8];
function chart(){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue","green","Yellow"],
datasets: [{
label: '# of Votes',
data: chartList,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
tooltips: {
mode: 'index',
intersect: true,
callbacks: {
title: function (tooltipItem, data) {
for(var i = 0; i < data.labels.length; i++)
{
return tooltipsLabel[i];
}
}
}
}
}
});
}
chart();
<html>
<head>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-lg-4">
<canvas id="myChart" width="100" height="100"></canvas>
</div>
<div class="col-lg-4"><canvas id="pieChart" width="100" height="100"></canvas></div>
</div>
<script>
</script>
</body>
</html>
var tooltipsLabel = ['Dhaka','Rajshahi','NewYork','London']
var chartList = [5,6,7,8];
function chart(){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue","green","Yellow"],
datasets: [{
label: '# of Votes',
data: chartList,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
tooltips: {
mode: 'index',
intersect: true,
callbacks: {
title: function (tooltipItem, data) {
return tooltipsLabel;
}
}
}
}
});
}
chart();
<html>
<head>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-lg-4">
<canvas id="myChart" width="100" height="100"></canvas>
</div>
<div class="col-lg-4"><canvas id="pieChart" width="100" height="100"></canvas></div>
</div>
<script>
</script>
</body>
</html>1 Answer
Reset to default 3Use tooltipItem property index to reference the item in your tooltipsLabel array:
var tooltipsLabel = ['Dhaka', 'Rajshahi', 'NewYork', 'London']
var chartList = [5, 6, 7, 8];
function chart() {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "green", "Yellow"],
datasets: [{
label: '# of Votes',
data: chartList,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
mode: 'index',
intersect: true,
callbacks: {
title: function(tooltipItem, data) {
console.log(tooltipItem);
return tooltipsLabel[tooltipItem[0].index];
}
}
}
}
});
}
chart();<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-lg-4">
<canvas id="myChart" width="100" height="100"></canvas>
</div>
<div class="col-lg-4"><canvas id="pieChart" width="100" height="100"></canvas></div>
</div>