Sua Blog

[react-chartjs-2] Warning: Each dataset needs a unique key. By default, the "label" property on each dataset is used. Alternatively, you may provide a "datasetKeyProvider" as a prop that returns a unique key.

기본적으로 react-chartjs-2 는 label속성을 키로 사용하여 데이터 세트를 구별한다. 나는 여러개의 차트를 사용하고 label이 같은 차트도 있어 발생한 오류이다. datasetKeyProvider 속성을 사용하여 unique key를 넣어주면 해결할 수 있다.

btoa() 메서드를 사용해서 key를 생성한다.

btoa(), atob()

btoa() 함수는 매개변수로 문자열을 받아 Base64로 인코딩된 ASCII 문자열을 생성해 반환한다.

const encodedData = btoa('Hello, world'); // 문자열 인코딩
const decodedData = atob(encodedData); // 문자열 디코딩
console.log(encodedData); // 'SGVsbG8sIHdvcmxk'
console.log(decodedData); // 'Hello, world'

Base64 : 8비트 이진 데이터를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자로만 이루어진 문자열로 바꾸는 인코딩 방식 (64는 64진법이라는 뜻이다.)

Base64는 이진 데이터를 입력받도록 설계되었다. 따라서 btoa()에 2바이트 문자를 포함한 문자열을 제공하면 오류가 발생한다.

datasetKeyProvider key 생성

Math.random() 함수로 난수 문자열을 만들고 base64로 인코딩하고 12자리로 잘라 key로 사용했다.

const datasetKeyProvider = () => {
  return btoa(Math.random().toString()).substring(0, 12);
};

<Bar data={data} options={options} datasetKeyProvider={datasetKeyProvider} />;

참고

위키백과 Base64

MDN Web Docs

react-chartjs-2