// Modify 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 /* center align */
},
padding: {
top: 5
},
/* hover effect */
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b2b9b0a3a5ffbba291e3ffe9ffe1">[email protected]</a>"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a7aca5b6b0aeb7e9b4a8b1a3adaae9a0a5b0a5a8a5a6a1a8b784f4eaf3eaf4">[email protected]</a>/dist/chartjs-plugin-datalabels.min.js"></script>