CODEWITHSUNDEEP
javascriptchart.js
August Williams
August Williams

Reputation: 929

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

I have created a Radar Chart using ChartJS as follows:

HTML:

<canvas id="radarChartTest" width="800" height="600"></canvas>
<script>
    radarChartTest(["A", "B", "C", "D"], [5, 10, 15, 20], document.getElementById("radarChartTest"));
</script>

JS:

function radarChartTest(categories, totals, chartToPopulate) {
    var chartDisplay = chartToPopulate;
    var newChart = new Chart(chartDisplay, {
        type: 'radar',
        data: {
            labels: categories,
            datasets: [
                {
                    data: totals,
                    label: "test"
                }
            ]
        }
    })
}

JSFiddle

The chart draws and populates fine. However, when I hover over a radar point, it does not display the value:

broken chart

There should be a number after test:.

I am expecting something similar to this:

working radar chart

Am I missing an attribute or something? I have checked the documentation but could not spot anything for it. I have also compared my code to where I found (a working example), but could not spot anything there either.

Upvotes: 6

Views: 3020

Answers (4)

sheilak
sheilak

Reputation: 5873

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/[email protected]"> </script>

Upvotes: 8

Samuel Bi&#233;
Samuel Bi&#233;

Reputation: 900

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

Upvotes: 2

QPeiran
QPeiran

Reputation: 1495

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>

Upvotes: 2

Rub&#233;n S. Garc&#237;a
Rub&#233;n S. Garc&#237;a

Reputation: 750

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.

Upvotes: 2

Related Questions