I have a stacked bar graph where I want to show the proportion of projects for which our qualitative analyst needs to complete the thematic coding process. However, the visitors to the webpage won’t necessarily know the context, but will just want some details in tooltips. I have two categories: (1) Total projects and (2) Coded projects. In a new line for the Total projects tooltips under “Remaining Projects: 170” I want “Description: The remainder of projects that have not yet been qualitatively coded.” Similarly for “Coded Projects: 70” I want a new line to show “Description: The number of projects that have been qualitatively coded.”
The last working version of my stacked bar graph is here: https://codepen.io/tenebris_silentio/pen/ZEWzXyr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio Review Overview</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<div class="container">
<div class="row my-3">
<div class="col">
<p class="sansserif"><br>
</div>
</div>
<div class="col-md-6 py-1">
<div class="card" style="width: 36rem;">
<div class="card-body">
<canvas id="chBar"></canvas>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script>
// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];
/* bar chart */
var ctx = document.getElementById('chBar');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Proportion of Coded Projects'],
datasets: [
{
label: ['Coded Projects'],
data: [70],
info: [
['This refers to projects that have not been qualitatively coded using the TDF.'],
backgroundColor: '#D6E9C6',
}],
{
label: 'Remaining Projects',
data: [170],
backgroundColor: colors.slice(0,1),
info: [
['This refers to total number of projects left to code.'],
},
]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => 'Count: ' + data.datasets[0].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[0].info[tooltipItems[0].index])
}
}
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
}
});
</script>
Advertisement
Answer
Your tooltips.callbacks should look as follows:
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
}
}
Please have a look at your amended code below:
var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d'];
var ctx = document.getElementById('chBar');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Proportion of Coded Projects'],
datasets: [{
label: 'Coded Projects',
data: [70],
backgroundColor: '#D6E9C6',
info: [
['This refers to projects that have not'],
['been qualitatively coded using the TDF.']
]
},
{
label: 'Remaining Projects',
data: [170],
backgroundColor: colors.slice(0, 1),
info: [
['This refers to total number'],
['of projects left to code.']
]
}
]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
}
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});canvas {
max-width: 400px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="chBar"></canvas>