[Chartjs]-Chart.js Radar Not Displaying Data Values

by

6👍

✅

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>

Leave a comment