[Chartjs]-Show point values in Radar Chart using chart.js

by

4👍

✅

chartjs-plugin-datalabels & chart.js radar.

datalabels Datalabels Formatter

https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#data-transformation

1/2. Basic example – return “hello world”

enter image description here

2/2. “practical example” – return value:

formatter: function(value, context) {
  return context.chart.data.labels[context.value];
}

enter image description here

tooltip: false

Set tooltip to false (We use a visible value instead)

tooltips: false,

Basic snippet example:

// Change default options for ALL charts
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
  opacity: 1,
  textAlign: 'left',
  color: 'white',
  borderColor: '#11469e',
  borderWidth: 2,
  borderRadius: 100,
  font: {
    weight: 'bold',
    size: 12,
    lineHeight: 1 /* align v center */
  },
  padding: {
    top: 5
  },
  /* hover styling */
  backgroundColor: function(context) {
    return context.hovered ? context.dataset.borderColor : 'white';
  },
  color: function(context) {
    return context.hovered ? 'white' : context.dataset.borderColor;
  },
  listeners: {
    enter: function(context) {
      context.hovered = true;
      return true;
    },
    leave: function(context) {
      context.hovered = false;
      return true;
    }
  }
});

var data = {
  labels: ["Ball Skills", "Shooting", "Physical", "Defence", "Passing"],
  datasets: [{
    label: "De maria",
    backgroundColor: "rgba(38,120,255,0.2)",
    borderColor: "rgba(38,120,255, 1)",
    data: [90, 86, 76, 65, 82]
  }]
};

var options = {
  responsive: true,
  tooltips: false,
  title: {
    text: 'chartjs-plugin-datalabels - basic example',
    display: true,
    position: `bottom`,
  },
  plugins: {
    /* ######### https://chartjs-plugin-datalabels.netlify.com/ #########*/
    datalabels: {
      /* formatter */
      formatter: function(value, context) {
        return context.chart.data.labels[context.value];
      }
    }
  },
  /* scale: https://www.chartjs.org/docs/latest/axes/radial/linear.html#axis-range-settings */
  scale: {
    angleLines: {
      display: true
    },
    pointLabels:{
      /* https://www.chartjs.org/docs/latest/axes/radial/linear.html#point-label-options */
      fontSize: 15,
      fontColor: 'black',
      fontStyle: 'bold',
      callback: function(value, index, values) {
        return value;
      }
    },
    ticks: {
      /* https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration */
      /* suggestedMax and suggestedMin settings only change the data values that are used to scale the axis */
      suggestedMin: 0,
      suggestedMax: 100,
      stepSize: 25, /* 25 - 50 - 75 - 100 */
      maxTicksLimit: 11, /* Or use maximum number of ticks and gridlines to show */
      display: false, // remove label text only,
    }
  },
  legend: {
    labels: {
      padding: 10,
      fontSize: 14,
      lineHeight: 30,
    },
  },
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'radar',
  data: data,
  options: options
});
<canvas id="chart" width="500" height="350"></canvas>
<br>
<br>
<a href="https://chartjs-plugin-datalabels.netlify.com/" target="_blank">chartjs-plugin-datalabels</a>


<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.min.js"></script>

codepen: https://codepen.io/ezra_siton/pen/bGdYaLd

Leave a comment