How to make Radar chart's tooltips show "labels" in vue-chartjs? - vue.js

Question

My radar's tooltips is show "labels" but I want radar's tooltips show "data"
I refer to the method of chart.js official website but still can't display it correctly
My Radar chart
Chart.js official website Radar chart
My code version
"dependencies": {
"chart.js": "^2.9.3",
"chartkick": "^3.2.0",
"core-js": "^3.3.2",
"hchs-vue-charts": "^1.2.8",
"vue": "^2.6.10",
"vue-chartjs": "^3.5.0",
"vue-chartkick": "^0.6.0",
"vue-router": "^3.1.3",
"vuetify": "^2.1.0"
}
My code
<script>
import { Radar } from "vue-chartjs";
export default {
extends: Radar,
data() {
return {
datacollection: {
labels: [
"Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"
],
datasets: [
{
label: "My First Dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second Dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}]},
options: {
scale: {
angleLines: {
display: false
},
ticks: {
suggestedMin: 50,
suggestedMax: 100
}}}};},
mounted() {
this.renderChart(this.datacollection, this.options);
}};
</script>

Answer 1

You can add the tooltips option with a callback function that returns the title as follows:
"options": {
...
"tooltips": {
"callbacks": {
"title": (tooltipItem, data) => data.labels[tooltipItem[0].index]
}
}
}
Please have a look at the following JavaScript code snippet. Adding the tooltips option to your existing Vue.js code should work the same.
new Chart(document.getElementById("myChart"), {
"type": "radar",
"data": {
"labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
}, {
"label": "My Second Dataset",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)"
}]
},
"options": {
"elements": {
"line": {
"tension": 0,
"borderWidth": 3
}
},
"tooltips": {
"callbacks": {
"title": (tooltipItem, data) => data.labels[tooltipItem[0].index]
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>