Chart.js 차트js 툴팁 tooltip사이즈 변경

오늘은 4시간동안 삽질한 결과물입니다
우선 chart.js 를 이용했는데, 툴팁 디자인이 마음에 안 들어서 변경하려고 하는 도중, 크기 변경에서 벽을 느끼고 구글 검색을 시작했습니다.
굉장히 다양한 결과가 나왔고 모든 결과를 복붙했지만 오류도 안 나고 구현도 되지 않았습니다
빡이 치기 시작해서 챗지피티한테 물어봤습니다

결과는 다음과 같습니다

위 코드에서 titleFontSize와 bodyFontSize 속성은 현재 Chart.js 버전(3.7.0 기준)에서는 적용되지 않습니다. 따라서, 해당 속성을 사용하여 툴팁의 크기를 조정할 수 없습니다.

Chart.js에서 툴팁의 크기를 조정하려면, options 객체 내부의 plugins 속성에서 tooltip 플러그인을 사용하여 설정할 수 있습니다. 이 플러그인을 사용하면 titleFontSize와 bodyFontSize 외에도 다양한 툴팁 속성을 설정할 수 있습니다.

예를 들어, 아래 코드는 툴팁의 크기를 20px로 조정하고, 배경색과 폰트 색상을 지정하는 방법을 보여줍니다.

const config = {
  type: 'bar',
  data: data,
  options: {
    maintainAspectRatio: false,
    plugins: {
      tooltip: {
        backgroundColor: 'rgba(255,255,255,0.8)',
        titleFont: { size: 20 },
        bodyFont: { size: 20, color: '#000' }
      }
    }
  }
};

위 코드에서 plugins 속성 내부에 tooltip 플러그인을 추가하고, backgroundColor, titleFont, bodyFont 속성을 사용하여 툴팁의 배경색, 제목 폰트, 내용 폰트를 설정합니다. titleFont와 bodyFont 속성의 size 값으로 툴팁의 크기를 조정할 수 있습니다.

결론은, 현재 Chart.js 버전(3.7.0 기준) 에서 수많은 구글 결과가 나타내는

  titleFontSize: 50,
  bodyFontSize: 50

이런 건 이제 쓸 수 없다는 겁니다
여러분은 저처럼 안 되는 걸로 4시간 씨름하시지 말라고 포스팅해둡니다
옵션 안에 플러그인 안에 툴팁 속성 넣고 각종 크기, 폰트, 색 지정해주시면 됩니다
위에 챗지피티가 제시해준 예제처럼요.