var chart = document.getElementById("spiderChart").getContext("2d");
var secondChart = new Chart(chart, {
type: "radar",
data: {
labels: ["Development", "Design", "SMM", "Marketing", "Recruit"],
datasets: [
{
data: [300, 350, 130, 370, 124],
backgroundColor: "rgba(10, 93, 255, .1)",
borderColor: "#0A5DFF",
lineTension: 0,
borderWidth: 0,
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "mitter",
pointBackgroundColor: "#0A5DFF",
pointBorderColor: "white",
hoverBackgroundColor: "#0A5DFF",
pointBorderWidth: 2,
pointHitRadius: 5,
pointHoverRadius: 7,
pointRadius: 7,
fill: true,
},
{
data: [200, 350, 330, 270, 324],
backgroundColor: "rgba(32, 201, 51, .1)",
borderColor: "#20C933",
lineTension: 0,
borderWidth: 0,
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "mitter",
pointBackgroundColor: "#20C933",
pointBorderColor: "white",
hoverBackgroundColor: "#20C933",
pointBorderWidth: 2,
pointHitRadius: 5,
pointHoverRadius: 7,
pointRadius: 7,
fill: true,
},
],
},
options: {
layout: {
padding: {
left: -10,
right: 0,
bottom: 0,
},
},
scale: {
ticks: {
display: false,
},
},
legend: {
display: false,
labels: {
fontFamily: "Inter",
fontSize: 14,
},
},
tooltips: {
enabled: true,
mode: "single",
tooltipFontFamily: "Inter",
callbacks: {
title: function (tooltipItem, data) {
return data["labels"][tooltipItem[0]["index"]];
},
label: function (tooltipItem, data) {
return data["datasets"][0]["data"][tooltipItem["index"]];
},
},
backgroundColor: "#000",
titleFontSize: 11,
titleFontColor: "rgba(255, 255, 255, 0.6)",
bodyFontColor: "#fff",
bodyFontSize: 14,
displayColors: false,
titleAlign: "center",
bodyAlign: "center",
padding: {
left: 11,
right: 11,
top: 4,
bottom: 4,
},
},
},
});
