Chart.js - y축 고정시키기

chart.js 커스텀 하는법에 대하 포스팅을 해야하는데.. 또 미룰것을 알기에 잊어버리기 전에 써두는 이슈 해결법들..🫠 시작!

📌 가로 스크롤 할 때 y축 고정하기

사실 y축 고정하는 옵션은 chart.js 에서 제공하지 않는다.
그래서 꼼수를 좀 써야하는데..🤔

바로 y축 별도로 생성하기!!

HTML

<div class="canvas-wrap">
  <div class="canvas-inner">
    <canvas id="barChart" width="1200" height="450"></canvas>
  </div>
  <canvas id="barY" class="yAxes" width="1275" height="465"></canvas>
</div>

이렇게 canvas 를 2개를 그린다.

• 차트를 보여줄 캔버스 ➡️ 여기선 y축을 없앨거다.
• 별도 y축 캔버스

❗️ 가로 스크롤을 해줄거니까 div 로 캔버스를 감싸줬다

CSS

.canvas-wrap { position: relative; overflow: hidden; padding-top: 34px; padding-left: 34px; }
.canvas-inner { width: 100%; height: 100%; overflow-x: auto; }

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>

let barCt = document.getElementById('barChart');
let barChart = new Chart(barCt, {
  type: 'bar',
  data: {
    labels: ['2023', '2022', '2021', '2020', '2019'] ,
    datasets: [
      {
        label: '합계',
        data: [100,200,450,250,390],
        backgroundColor: 'grey',
        maxBarThickness: 24,
        borderRadius: 50,
      }
    ]
  },
  options: {
    responsive: false,
    maintainAspectRatio: false, // 크기 고정
    plugins:{
      legend: {
        display: false // 라벨 숨기기
      },
    },
    scales: {
      x: {
        grid: {
          display: false,
        }
      },
      y: {
        display: false,
      },
      layout: {
          padding: {
            top: 10, // 데이터 짤림 방지
          }
    }
  }
}); 

scales 의 grid 속성은 기본값이 true 이기 때문에 false 로 변경해줘서 축을 다 지워버린다.

다음은 따로 그려줄 y축에 관한 스크립트! ⤵️

JavaScript

let barYCt = document.getElementById('barY');
let barYChart = new Chart(barYCt, {
  type: 'bar',
  data: {
    datasets: [
      {
        label: '',
        data: [500],
        backgroundColor: ['rgba(255, 255, 255, 0.0)'],
      }
    ]
  },
  options: {
    responsive: false,
    maintainAspectRatio: false,
    scales: {
      y: {
        ticks:{
          stepSize: 100 // 백 단위로 표시
        }
      }
    }
  }
});

캔버스를 하나 더 그려주는 대신 data 에 labels 을 입력하지 않으면 아에 차트가 생성이 안된다!
혹시 모르니까 backgroundColor 도 투명도를 0으로 줘서 안보이게 하고 100단위로만 나오게 할려고 options.scales.y.ticks.stepSize 를 지정해줬다.

CSS

.yAxes { position: absolute; bottom: 18px; left: 0; pointer-events: none; }

그리고 캔버스를 띄워주면! ⤵️

짜잔~ 마치 하나의 캔버스 처럼 나온다!
좌우 스크롤도 잘 되는걸 확인할 수 있다.

근데 난 별로 추천하고 싶지 않다..🫠

y축을 별도로 만든거여서 최대 y축의 값을 넘는 데이터가
새로 들어오게 되면 y축도 수정해줘야 하고 캔버스의 크기도 맞춰야 하는.. 매우 번거로운 일이 생기기 때문에..

그치만 사용자 입장에선 보기 좋은거 인정..🫡
그러니까 y축 고정시키는 기능 만들어주라..

✂️ 차트가 짤릴 때

위의 경우와 같이 커스텀을 하다 보면 차트가 짤리는 경우가 있다(나만 그런가🥹)

예시 ⤵️

차트 위에 라벨이 있는 경우,
값이 최대 y축 값에 가까워질수록 잘리던데 이럴때 쓰는 방법!

JavaScript

options: {
	layout: {
      padding: {
        top: 20,
       	bottom: 20,
        left: 24,
        bottom: 24
      }
  }
}

이런식으로 options.layout.padding 을 주면 된다!
css랑 동일하게 위아래, 좌우 다 가능하니 주고싶은만큼 주면 해결! 🤗

※ Chart.js 버전마다 사용법이 다를수도 있어요!
저는 4.4.0 입니다!