<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Custom Radar Chart</
title
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
canvas
id
=
"myCustomRadarChart"
width
=
"400px"
height
=
"400px"
>
</
canvas
>
<
script
type
=
"text/javascript"
>
document.addEventListener('DOMContentLoaded',
function () {
class CustomRadarController extends
Chart.controllers.radar {
draw() {
super.draw(arguments);
const meta = this.getMeta();
const ctx = this.chart.ctx;
meta.data.forEach((point) => {
const { x, y } = point.getProps(['x', 'y']);
const { pointStyle, radius }
= point.options;
ctx.save();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 1;
if (pointStyle === 'circle') {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.stroke();
} else {
ctx.strokeRect(x - radius,
y - radius, 2 * radius, 2 * radius);
}
ctx.restore();
});
}
}
CustomRadarController.id = 'customRadar';
CustomRadarController.defaults = Chart.
controllers.radar.defaults;
Chart.register(CustomRadarController);
const data = {
labels: ['Category 1', 'Category 2',
'Category 3', 'Category 4', 'Category 5'],
datasets: [{
label: 'Custom Radar Chart',
data: [3, 5, 2, 8, 1],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(75, 192, 192, 1)',
pointStyle: 'circle',
pointRadius: 5
}]
};
const options = {};
const ctx = document
.getElementById('myCustomRadarChart').getContext('2d');
new Chart(ctx, {
type: 'customRadar',
data: data,
options: options
});
});
</
script
>
</
body
>
</
html
>