Skip to content
Advertisement

Chartjs Radar Chart Tooltip not showing correct label

I have the following radar chart, which displays the data fine. However on the tooltip, it is not showing the label (e.g – C), it is just showing the data value twice (e.g – 3).

Does anyone know what I am doing wrong?

enter image description here

Here is my code:

this.radarChartData = [
      {
        data: [1, 2, 3],
        label: "Number",
      },
    ];
this.radarChartLabels = ["A", "B", "C"];
this.radarChartOptions = {
    responsive: true,
    scale: {
      ticks: {
        display: true,
        min: 0,
      },
    },
  };

Advertisement

Answer

As pointed out by @user2057925, there’s been reported an issue in older versions. However, if you manage to use the fixed version, just use for instance,

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js

Then you can use it normally,

(function() {
  var ctx = document.getElementById("mychart");

  var datas = {
    labels: ["A", "B", "C"],
    datasets: [{
        data: [1, 2, 3],
        label: "Number",
        backgroundColor: [
          'rgb(106,189,126)',
        ],
      },

    ]
  };
  
  var options = {
    responsive: true,
    hover: {
      mode: 'label',
    },
    scale: {
      ticks: {
        display: true,
        min: 0,
      },
    },
  };


  var chr = new Chart(ctx, {
    data: datas,
    type: 'radar',
    options: options,
  });

})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<div style="width: 500px;height: 300px">
  <canvas id="mychart"></canvas>
</div>
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement