Customizing radar chart (no anglelines in the center/empty center/ empty tick label)

[qkrdkwl9090]

`options: {

responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
tooltips: {
enabled: false,
},
hover: { mode: null },
scale: {
ticks: {
min: -0.001,
max: 5,
stepSize: 1,
fontSize: 11,
beginAtZero: true,
// showLabelBackdrop: false,
callback: function (value) {
if (value === 5) return 'Good'
if (value === 0) return 'Bad'
return ''
},
},
angleLines: {
color: '#D6DBE0',
// borderDash: [0, 0, 0, 22, 100],
},
gridLines: {
color: '#D6DBE0',
lineWidth: 1,
},
},`

I would like to modify the ticks and angle lines with the following design.

But in the case of Ticks,

`callback : function (value) {

if (value === 5) return 'Good'
if (value === 0) return 'Bad'
return ''`

Although modified, there is an empty space in the '' section.

To give the showLabelBackdrop option, you can see the line in the back, so it's not the design you want.

To remove the middle line, angleLines.borderDash was used, but it would not fit if the size of the component changes due to changes in the length of the label text.

angleLines: { borderDash: [0, 0, 0, 22, 100], },

version: chart.js 2.8.0

[Udemology]

Hi @qkrdkwl9090 ,

I have been looking into your request and have found an option after some time playing around to get the center correct. First video is good to watch for understanding and removes the showLabelBackdrop. Second video fixes the tiny pixel difference line length of the gridline in the center:

1. Part 1: https://youtu.be/Bo6iEwfh6dg
2. Part 2 (Making it pixel perfect): https://youtu.be/pm90n81uET4

This is written in Chart.js Version 3. However, all of the options should work as well in Chart.js 2. Just consider the name space. As Chart.js 3 uses scales.r.ticks
While Chart.js 2 uses just scale.ticks

But all should be equal in result. I hope this helps.

[qkrdkwl9090]

@Udemology You're a genius

Thanks to you, I solved the way I couldn't find it in three weeks. Thank you very much.