[javascript] Chartkick에서 사용 가능한 차트 축 단위 0 표시 여부 설정 방법

29 Nov 2023

javascript

Chartkick은 JavaScript 기반의 간단하고 직관적인 차트 라이브러리입니다. Chartkick을 사용하여 데이터를 시각화 할 때, 축 단위에 0을 표시할지 여부를 설정할 수 있습니다. 이 설정을 통해 좀 더 뚜렷한 차트를 만들 수 있습니다.

차트 축 단위 0 표시 설정

차트 축 단위 0 표시 설정을 하려면 library 객체의 options 속성을 사용해야 합니다. 아래는 Chartkick에서 사용 가능한 차트 축 단위 0 표시 여부 설정 방법을 보여주는 예제입니다.

new Chartkick.LineChart("chart", {
  data: {
    "2021-01-01": 100,
    "2021-02-01": 200,
    "2021-03-01": 0,
    "2021-04-01": 400
  },
  library: {
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  }
});

위의 예제에서 beginAtZero 속성을 true로 설정하면, y축의 단위가 0에서 시작하는 것을 확인할 수 있습니다. 이 설정을 통해 차트가 좀 더 명확하게 표시될 수 있습니다.

참고 자료

위의 자료들은 Chartkick 및 Chart.js에 대한 공식 문서 및 GitHub 저장소 링크입니다. Chartkick 및 Chart.js에 대해 더 자세한 정보를 얻을 수 있습니다.