[chart.js] Radar 차트 마지막 외곽선만 두껍게 하기

카카오 서버에 불나는 바람에 이전 글이 안 가져와지는데, 이전 글을 참고해서 기본코드를 작성한 후.

진행 할 것.

 

기존 작성된 코드는 context => 부분에서 index를 따로 가져와야 해서 이걸 반응형으로 고쳣더니 화면에 따라 테두리가 사라지는 버그가 있었다.

 

그러다가 겨우 찾았다.

정답은 index가 아닌 value 값을 통해 해당 line을 찾는 것이었다.

이러한 질문을 보고 원개발자가 해당 기능을 추가하겠다고 적었다.

https://github.com/chartjs/Chart.js/issues/10007

Radar graph - grid customization · Issue #10007 · chartjs/Chart.js

아마도 다음 버전인 4.0에 해당 기능이 추가되리라고 본다.

하지만, 그건 그거고 이건 이거라서 일단 급하게 구현해야하니 작성하였다

const config = {
    type: 'radar',
    data: radarData,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            r: {
                suggestedMin: 0,
                suggestedMax: 100,
                stepSize: 10,
                grid: {
                    color: 'black',
                    lineWidth: context => (context.chart.scales.r.ticks[context.index + 1].value == 100)? "3" : "1",
                    borderDash: context => (context.chart.scales.r.ticks[context.index + 1].value == 100) ? [] : [6, 4]
                },
                ticks: {
                    beginAtZero: true,
                    color: 'black',
                    showLabelBackdrop: false, // hide square behind text
                },
                angleLines: {
                    color: 'black',
                },
                pointLabels: {
                    color: 'black',
                }
            },
        },
        plugins:{
            legend:{
                display:false
            }
        }
    },
};