<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0" />
<
script
src
=
</
script
>
<
title
>Chart.js</
title
>
</
head
>
<
body
>
<
div
>
<
canvas
id
=
"myChart"
></
canvas
>
</
div
>
<
script
>
const ctx = document.getElementById("myChart");
new Chart(ctx, {
type: "radar",
data: {
labels: [
"Searching",
"Sorting",
"Linked Lists",
"Trees",
"Graphs",
"Dynamic Programming",
"Hashing",
],
datasets: [
{
label: "DSA Proficiency",
data: [85, 70, 95, 80, 65, 75, 90],
fill: true,
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgb(75, 192, 192)",
pointBackgroundColor: "rgb(75, 192, 192)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgb(75, 192, 192)",
},
{
label: "Algorithm Complexity",
data: [60, 80, 75, 85, 40, 70, 55],
fill: true,
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgb(255, 99, 132)",
pointBackgroundColor: "rgb(255, 99, 132)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgb(255, 99, 132)",
},
],
},
options: {
elements: {
line: {
borderWidth: 3,
},
},
},
});
</
script
>
</
body
>
</
html
>