[Chart.js] Y축 최대값 동적으로 설정하는 방법

Intro

 안녕하세요. 이번 시간에는 Chart.js에서 Y축 최대값을 동적으로 설정하는 방법에 대해 알아보도록 하겠습니다. 

 

Case

우선 Chart 컴포넌트를 활용하는 부분은 아래와 같습니다. option에 따라 표시하는 데이터를 다르게 retrun 하고 있습니다.  데이터가 동적으로 달라지다 보니 y축 범위 최대값도 해당 datasets에 맞게 다르게 표시해야 했습니다. 

const getData = (option: string): ChartData<'line'>['datasets'] => {
    if (option === 'hourly') {
      return [
        {
          fill: false,
 		  ..., 
          data: [0, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375, 160, 202, 265, 210, 270, 255, 290, 360, 375]
        },
        {
          fill: false,
          ..., 
          data: [50, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280, 140, 160, 230, 300, 220, 170, 210, 200, 280]
        },
        {
          fill: false,
          ..., 
          data: [20, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180, 74, 75, 130, 155, 125, 90, 140, 130, 180]
        }
      ]
    } else if (option === 'daily') {
      return [
        {
          fill: false,
          ..., 
          data: [20, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 20, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 100, 400, 130, 155, 125, 90]
        }
      ]
    } else {
      return [
        {
          fill: false,
          ..., 
          data: [20, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90]
        }
      ]
    }
}

const data: ChartData<'line'> = {
    labels: getLabel(option),
    datasets: getData(option)
}

<LineChart data={data} height={400} options={options} />

 

How to dynamically set y-axis max value

이를 위해 저는 다음의 방법을 사용하였는데요, suggestedMax 속성을 활용하여 getData()를 호출하고, dataset의 data를 flatMap() 메서드를 활용하여 모두 평탄화를 해줬습니다. 이후 배열 안에서 가장 큰 숫자를 뽑아서 (Math.max) suggestedMax 에 넣어주었습니다. 

const options: ChartOptions<'line'> = {
    scales: {
      ..., 
      y: {
        min: 0,
        suggestedMax: Math.max(
          ...getData(option)
            .flatMap(dataset => dataset.data)
            .filter((value): value is number => value !== null)
        ),
       	..., 
      }
    },
   	...
}

 

위의 방법을 활용하면 Y축 최대값을 동적으로 설정하실 수 있습니다 .