React) chart.js LineChart 마지막 데이터 잘리는 현상

Chart.js 라이브러리를 사용해서 그래프를 그리는 과정에서, 마지막 데이터가 반 잘리는 현상이 발생했다..

• 해결을 위해서 하루를 삽질 했다!ㅠ

위와같이 마지막 그래프만 잘리는 현상이었다.

해결을 위해 생각 했던 방법은

• 그래프에 padding-right를 줘서 여백을 추가한다.
• dataset에 마지막 데이터를 한개 더 추가한다.
  -> 마지막 데이터는 null로 추가하면 데이터가 나타나지는 않지만 x축에서 공간 여백을 먹는다..

이처럼 여러 방법을 사용하던 도중 해결 방법을 찾았다.

scales: {
            x: {
              display: true,
              grid: {
                color: "#EFF0F3",
                lineWidth: (context) => (context.index === currentX ? 30 : 0), // 특정 tick일 때만 grid 라인 두께 설정
                display: false,
                tickLength: 1,
              },
              beginAtZero: true,
              // max: 24, // 최대 라벨 개수 설정 (설정하면 마지막 데이터 잘림..)
              ticks: {
                stepSize: 1, // X 축의 라벨 간격을 1로 설정
                autoSkip: false,
                color: "#000",
                font: {
                  size: responsiveFontSize,
                  weight: "bold",
                  family: "Pretendard",
                },
              },
            },
            y: {
              display: false,
              beginAtZero: true,
              max: 70,
              grid: {
                display: false,
              },
            },
          },

위 코드를 사용해서 적용하니 되었다.
방법은 scales에서 x축에 max설정을 빼면 된다.
기존 나는 x축에 dataset만큼 max설정을 적용 했는데, max설정을 빼니 마지막 데이터가 잘나타났다.

굉장히 허무했던 이슈였다..