[Chart.js] 차트 사이즈에 맞춰 폰트사이즈 변경하기

 

 

이렇게 크기가 고정되면 레이블이 잘 보이지 않는 현상이 발생..

 

---

 

◽ 기존

font: {
  size: 14,
  family: 'Pretendard',
},

 

 

◽ 변경

 

font: function (context) {
  const width = context.chart.width
  const size = Math.round(width / 32)

  return {
    size: size,
    family: 'Pretendard',
  }
},

 

 

크기에 맞게 가독성있는 크기로 잘 변환되었다.

 

 

 

 

출처

Limit labels number on Chart.js line chart

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.