React/Next) Chart.js 다중 도넛

1. Data structure

  const data = {
    labels: [...Object.keys(skillData), ...Object.keys(languages)],
    datasets: [
      {
        labels: Object.keys(skillData),
        data: Object.values(skillData),
        hoverOffset: 4,
      },
      {
        labels: Object.keys(languages),
        data: Object.values(languages),
        hoverOffset: 4
      }
    ]
  }

두가지 데이터로 한 링에 도넛 두개를 만들기 때문에 dataset 2개에 labels도 따로 지정해줍니다. 하지만 이렇게만 끝내면 두번째 두번째 즉, 안쪽에 있는 도넛의 인덱스가 0부터 다시 시작하기때문에 lables[0]을 가져다 쓰게 돼서 데이터값과 라벨이 맞지 않습니다.

2. Options - datalabels

const options: any = {
  plugins: {
    legend: {
      display: false
    },
    datalabels: {
      align: "center",
      formatter: function (_: any, context: any) {
        return context.dataset.labels[
          context.dataIndex
        ]
      },
      color: "#fff",
      font: {
        weight: 600,
        size: 12
      }
    },
    tooltip: {
      callbacks: {
        title: function(context: any) {
          return context[0].dataset.labels[context[0].dataIndex];
        }
      }
    }
  }
}

라벨링을 해주기 위해 chartjs-plugin-datalabels을 설치합니다.
도넛안에 라벨을 표시할거라 legend display는 false로 설정했습니다.

여기 datalabels의 context는 위와 같습니다.
dataset에서 따로 설정해준 labels에서 datasetIndex에 맞춰 라벨을 지정해줍니다.

3. Option - tooltip

이제 라벨을 각각의 dataset에 맞는 라벨이 표시되어 보여지지만 데이터를 hover할때 나오는 tooltip은 여전히 데이터값과 다른 라벨이 표시될겁니다.

tooltip도 datasetIndex에 맞춰 타이틀을 수정해줍니다.

최종적으로 데이터값과 라벨, 툴팁 타이틀까지 일치하는 것을 볼 수 있습니다.