[Chart JS] 도넛 그래프 굵기 변경 _ "react-chartjs-2"

chart js 로 도넛 그래프 생성하는 예제입니다.

 

주목하실점은

저의 경우

import { Doughnut } from 'react-chartjs-2';

를 임포트 하였습니다.

 

구글링과 정식 페이지에선

도넛의 굵기 조절을 option에서 cutoutPercentage / percentageInnerCutout 를 사용해서 조절하지만 문제는 안먹혔습니다.

 

찾고 찾고 또 같아서 option이 아닌 data에 설정 해주는걸 찾았습니다

<div className="chart doughnut">
    <Doughnut
        data={data}
        options={options}
        plugins={data.plugins}
    />
</div>

 

    const data = {
        plugins: [ChartDataLabels],       // 라인 이나 막대에 data 값 출력
        labels:labelData,
        datasets: [
            {
            label: 'pieData',
            data: pieData,
            backgroundColor :objColor ,
            hoverBackgroundColor:hoverBackgroundColor,
            hoverBorderColor: "rgba(234, 236, 244, 1)",
            cutout: "60%",    // 도넛 안쪽 원의 크기 설정
            }
        ]
      };

*데이터셋 에 cutout  설정 *

 

      const options = {
        // cutoutPercentage: 10, //도넛 굵기 값이 클수록 얇아짐 안먹히는 이유좀ㅋ ? cutoutPercentage / percentageInnerCutout    
        maintainAspectRatio: false, //fasle :  상위 div에 구속
        plugins: {
          legend: {
            position: 'bottom',
          },
          title: {
            display: false,
            text: titleText
          },
          datalabels: {
            display: true,
            formatter: (value,ctx) => {
                let total = 0
                for(let i = 0 ;i<5; i++ ){
                   total += ctx.dataset.data[i]
                }
                let result = (value / total ) *100
                if(value == 0){
                    return '';
                }else{
                    return result.toFixed(1) + '%';
                }
            },
            color: '#fff',
            // backgroundColor: '#404040'
            weight: 'bold',
            textShadowBlur: 10,
            textShadowColor : 'black',
          },
          doughnutlabel: {
            labels: [{
              text: '0',
              font: {
                size: 20,
                weight: 'bold'
              }
            }, {
              text: 'total'
            }]
          }
        },
        onClick: function(evt, element) {
          console.log(evt, element);
          console.log("click 도넛 index : ", element[0].index);
          console.log(labelData[element[0].index]);
          onDoughnut(element[0].index)
        }
      };

옵션 설정엔 퍼센트 출력과, 온클릭 이벤트 코드 들어가 있습니다.