chartjs v2 with plugin

by paul724

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chart.js</title>
    <link rel="stylesheet" href="main.css">
    <style>
		.wrapper {
		   max-width: 400px;
		   margin: 0 auto;
		}
    </style>
</head>
<body>
 <div class="wrapper">
  <canvas id="myChart"></canvas>
 </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2">
//https://v2_0_0--chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#configuration
</script> 
<script src="script.js"></script>
</body>
</html>

JavaScript

const labels = ["Decisions", "Flexibility", "Communication", "Learning", "Team", "Awareness", "Agility", "Delegation", "Listening", "Style", "Generation", "Trust"];
const series = [5,4.2,5,3.8,5,4.3,5,4.9,5,3.7,5,4.4];

new Chart(document.getElementsByTagName("canvas")[0], {
  type: "radar",
  data: {
    labels,
    datasets: [{
      backgroundColor: '#0000FF33',
      label: "Leadership Qualities",
      data: series,
      lineTension: 0.1,
    }],
  },
  
  options: {
  	plugins: {
            title: {
                display: true,
                text: 'Leadership',
            },
			datalabels: {
					color: 'blue',
					labels: {
					  title: {
						font: {
						  weight: 'bold',
						},
					  },
					  value: {
						color: 'green',
					  },
					},
				  },
        	},
            
   scales: { 
   r: {
    pointLabels: {
		family: 'times',
		color: 'green',
		font: {
        size: 12,
        style: 'italic',
      },
    },
  
    angleLines: {
                display: true,
                lineWidth: 1,
				color: 'teal',
				borderDash: ([5, 15]),
				},
			},
		},
    
    scale: {
			display: true,
			min: 0,
			max: 5,
			stepSize: 0.5,

			ticks: {
					showLabelBackdrop: true,
					color: 'green',
				  },
		responsive: true,
  	},
  },
});