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

by

2👍

✅

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>

Leave a comment