React | react-chartjs-2 ticks 설정

react-chartjs-2를 사용하는데, options 설정이 제대로 안 돼서 서칭한 결과를 기록 겸 공유 한다.

 

설정하는 방법은 Linear Scale - Step Size을 참고한다.
ticks: {stepSize: 10}을 설정해 단위가 10으로 고정되도록 설정한다.

import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, registerables } from 'chart.js';
ChartJS.register(...registerables);

const options = {
  scales: {
    y: {
      min: 0,
      max: 100,
      ticks: {
        stepSize: 10,
      },
    },
  },
};

위 설정만으로 안 될 경우 maintainAspectRatio를 해제한다.

const options = {
  maintainAspectRatio: false,
  scales: {
    y: {
      min: 0,
      max: 100,
      ticks: {
        stepSize: 10,
      },
    },
  },
};

maintainAspectRatio true

maintainAspectRatio false

 

오... 이런게 생겻다...