CODEWITHSUNDEEP
chart.js
Billy Bones
Billy Bones

Reputation: 2965

Chart.js Radar Not Displaying Data Values

My Radar chart will not display the data value when hovering over a point. Chart.js 2.8.0

<script src="./vendor/chart.js/Chart.js"></script>
<canvas id="radar-chart" width="1200" height="550"></canvas>
<script>
new Chart(document.getElementById("radar-chart"),{
    type: 'radar',
    data: {
        labels: ["Buisiness Loans","Residential Loans","Aggriculture Loans","Student Loans","Personal Loans"],
        datasets: [{
            label: "Guthrie",
            data: [13,22,21,29,15],
            }],
    }
});
</script>

This still happens when I use the template on this page. So may not be directly due to something in chart.js. Problem occurs both in chrome and edge. I have no additional plugins loaded and no css.

EDIT 1 : hovering will display the labels just not the data value for the point.

Upvotes: 3

Views: 1585

Answers (1)

timclutton
timclutton

Reputation: 13004

This looks to be a regression in 2.8.0. The two example snippets below are identical except for the version of Chart.js they use. Tooltip values are present in 2.7.2 but not in 2.8.0.

This is apparently fixed and will be included in 2.9.0.

Note you can workaround the problem with a custom tooltip callback:

new Chart(document.getElementById("radar-chart"), {
  type: 'radar',
  data: {
    labels: ["Buisiness Loans", "Residential Loans", "Aggriculture Loans", "Student Loans", "Personal Loans"],
    datasets: [{
      label: "Guthrie",
      data: [13, 22, 21, 29, 15],
    }],
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return data.datasets[tooltipItem.datasetIndex].label + ": " + tooltipItem.yLabel;
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="radar-chart" width="1200" height="550"></canvas>

2.8.0; broken tooltips:

new Chart(document.getElementById("radar-chart"), {
  type: 'radar',
  data: {
    labels: ["Buisiness Loans", "Residential Loans", "Aggriculture Loans", "Student Loans", "Personal Loans"],
    datasets: [{
      label: "Guthrie",
      data: [13, 22, 21, 29, 15],
    }],
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="radar-chart" width="1200" height="550"></canvas>

2.7.2; working tooltips:

new Chart(document.getElementById("radar-chart"), {
  type: 'radar',
  data: {
    labels: ["Buisiness Loans", "Residential Loans", "Aggriculture Loans", "Student Loans", "Personal Loans"],
    datasets: [{
      label: "Guthrie",
      data: [13, 22, 21, 29, 15],
    }],
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="radar-chart" width="1200" height="550"></canvas>

Upvotes: 6

Related Questions