[이슈] : react-chartjs 라벨 숨기기

📋 내용 : react-chartjs를 사용할 때, 차트의 라벨 숨기기

react-chartjs를 사용할 때, 차트의 라벨을 숨기고 싶을 수 있습니다.

스택오버플로우의 답변은 legend: {display: false} 를 적용하면 된다고 하는데, 최신 버전에서는 이렇게 해도 라벨이 감춰지지 않습니다.

const options = {
  scales: {
    yAxes: [
      {
        ticks: {
          beginAtZero: true,
        },
      },
    ],
  },
  legend: {
    display: false,
  },
};

최신 chartjs 버전 (21년 5월 기준 ^3.2.1)에서는 legend를 plugin으로 감싸야 정상적으로 적용됩니다.

const options = {
  scales: {
    yAxes: [
      {
        ticks: {
          beginAtZero: true,
        },
      },
    ],
  },
  plugins: {
    legend: {
      display: false,
    }
  }
};

라벨이 가려진 모습

문서를 확인해보니 라벨(legend)뿐만 아니라, 이전의 2.9.4 버전 문서에서는 plugins 라는 네임스페이스 없이 곧바로 속성을 조작할 수 있었지만, 3.대 버전으로 넘어오면서 plugins 라는 네임스페이스가 중간에 추가된 것 같습니다.

2.9.4 버전 문서

3.2.1 버전 문서 (plugins 라는 네임스페이스가 중간에 추가되었습니다.)

참고 - www.chartjs.org/docs/master/configuration/title.html

Title | Chart.js