[Chartjs]-Why can I not see a data value when hovering over a point on the radar chart?

by

8👍

✅

This is due to a bug in the that version (2.8.0) of Chart.js (Values on Tooltip of Radar Chart is not shown).

You can fix it by upgrading to 2.9.0.

Updated working Fiddle with version 2.9.0

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.0"> </script>

2👍

As far as I can tell I had the same problem a while ago, maybe, because I’ll need to research a little more about this issue, the problem is due to a previous version of Chart.js. In any case here is a CodePen with a solution to your problem RadarChart Example. Hope this helps. Cheers, sigfried.

UPDATE
Since this is not only about the answers here is the link from the documentation of Chart.js that I used to solve the tooltips issue Label Callbacks.

2👍

I tried to re-create the problem you have but it looks all good to me.(A number after “total”)

Since you only post part of your code, I am not sure where you are confused.
So I attached the full code I created here. Compare it to your code and let me know if you still can’t generate the figure you want.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript chart</h2>

<p>Radar Chart Demo </p>

<canvas id="radar-chart" width="800" height="600"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"> 
</script>
<script>

function radarChart(categories, totals, averages, chartToPopulate, chartTitle) {
var chartDisplay = chartToPopulate;
var newChart = new Chart(chartDisplay, {
    type: 'radar',
    data: {
        labels: categories,
        datasets: [
            {
                data: averages,
                pointBackgroundColor: ["rgba(199,54,54,1)", "rgba(199,54,122,1)", "rgba(199,54,154,1)", "rgba(146,54,199,1)", "rgba(69,54,199,1)", "rgba(54,103,199,1)", "rgba(54,165,199,1)", "rgba(54,199,180,1)"],
                pointBorderColor: ["rgba(199,54,54,1)", "rgba(199,54,122,1)", "rgba(199,54,154,1)", "rgba(146,54,199,1)", "rgba(69,54,199,1)", "rgba(54,103,199,1)", "rgba(54,165,199,1)", "rgba(54,199,180,1)"],
                pointRadius: 15,
                pointStyle: "cross",
                pointHoverRadius: 25,
                pointHoverBorderWidth: 3,
                pointRotation: 45,
                pointBorderWidth: 1.2,
                backgroundColor: "rgba(61,49,225,0.5)",
                borderColor: "rgba(61,49,225,1)",
                label: "Averages",
                fill: true
            },
            {
                data: totals,
                pointBackgroundColor: ["rgba(199,54,54,1)", "rgba(199,54,122,1)", "rgba(199,54,154,1)", "rgba(146,54,199,1)", "rgba(69,54,199,1)", "rgba(54,103,199,1)", "rgba(54,165,199,1)", "rgba(54,199,180,1)"],
                pointBorderColor: ["rgba(199,54,54,1)", "rgba(199,54,122,1)", "rgba(199,54,154,1)", "rgba(146,54,199,1)", "rgba(69,54,199,1)", "rgba(54,103,199,1)", "rgba(54,165,199,1)", "rgba(54,199,180,1)"],
                pointRadius: 15,
                pointStyle: "cross",
                pointHoverRadius: 25,
                pointHoverBorderWidth: 3,
                pointRotation: 45,
                pointBorderWidth: 1.2,
                backgroundColor: "rgba(225,49,52,0.35)",
                borderColor: "rgba(225,49,52,1)",
                label: "Totals",
                fill: true
        },                 
        ]
    },
    options: {
        maintainAspectRation: false,
        title: {
            display: true,
            text: chartTitle,
            fontSize: 16
        }
    }
})
return chartDisplay;
}


var Chart = radarChart(["1","2","3","4"], [100,200,300,400], [10,20,30,40], 
document.getElementById("radar-chart"), "TEST")

document.getElementById("radar-chart").innerHTML = Chart;
</script>

</body>
</html>

2👍

I am using the version 2.8, and i got the same problem, to fix 

tooltips: {
                enabled: true,
                callbacks: {
                    label: function(tooltipItem, data) {
                        return data.datasets[tooltipItem.datasetIndex].label + ' : ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    }
                }
            }

See the issue

https://github.com/chartjs/Chart.js/issues/6188#issuecomment-497251833

Leave a comment