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

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>