The problem is that I don’t know how to position the ticks (numbers from 1 to 5) between the grid lines. Currently it is showing above the grid lines:
Here is the javascript code:
const ctx = document.getElementById("myChart");
new Chart(ctx, {
type: "radar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Turquesa"],
datasets: [
{
data: [4, 3.5, 2, 5, 4.5, 4, 2],
borderWidth: 1,
backgroundColor: "#ECAE4880",
borderColor: "#FBDDAD",
color: "#f00"
}
]
},
options: {
elements: {
point: {
pointStyle: false
}
},
scales: {
r: {
min: 0,
max: 5,
backgroundColor: "#FDF7EC",
ticks: {
backdropPadding: {
x: 16,
y: 16
},
z: 10,
backdropColor: "transparent",
color: "red",
backgroundColor: "black",
stepSize: 1
},
grid: {
color: "#EA910B",
backgroundColor: "red"
},
angleLines: {
color: "transparent",
// borderDash: 0
}
// angleLines: {
// display: false
// },
// suggestedMin: 50,
// suggestedMax: 100
}
},
plugins: {
legend: {
display: false
},
title: {
display: false
},
subtitle: {
display: false
}
}
}
// plugins: [
// {
// id: "centerTick",
// afterDraw: (chart, args, opts) => {
// const { ctx } = chart;
// ctx.fillStyle = opts.color || Chart.defaults.color;
// ctx.fillText(
// chart.scales.r.min,
// chart.scales.r.xCenter -
// ctx.measureText(chart.scales.r.min).width / 2,
// chart.scales.r.yCenter
// );
// }
// }
// ]
});
Here is the link to code: https://codepen.io/luaneaquino/pen/qBzaEOL
I tried setting plugin (commented code), but it does not work:
I expect the ticks be like this image below: