Chartkick는 JavaScript 라이브러리로, 그래프와 차트를 쉽게 생성할 수 있게 도와줍니다. 그리드선은 그래프의 배경에 표시되는 수평 및 수직 라인으로, 데이터 포인트의 위치를 시각적으로 파악할 수 있도록 도와줍니다.

이번 글에서는 Chartkick에서 사용 가능한 그리드선 굵기를 설정하는 방법에 대해 알아보겠습니다.

그리드선 굵기 설정 방법

Chartkick에서 그리드선 굵기를 설정하려면 options 객체를 사용하여 해당 속성을 설정해야 합니다.

아래의 예제 코드를 참고하여 그리드선 굵기를 설정하는 방법을 알아보세요.

new Chartkick.LineChart("chart", {
  data: [
    { name: 'Series 1', data: { '2021-01-01': 100, '2021-01-02': 200, '2021-01-03': 150 } },
    { name: 'Series 2', data: { '2021-01-01': 150, '2021-01-02': 100, '2021-01-03': 250 } }
  ],
  library: {
    scatter: {
      gridLineWidth: 2 // 그리드선 굵기 설정
    }
  }
});

위의 코드에서는 library 객체 안에 scatter 속성을 설정하여 그리드선의 굵기를 정의합니다. gridLineWidth 속성을 이용하면 그리드선의 두께를 원하는 굵기로 설정할 수 있습니다. 위의 예제에서는 2로 설정하였습니다.

참고 자료

Chartkick 라이브러리에 대한 자세한 내용은 공식 문서를 참고하세요. 그리드선 두께 외에도 Chartkick에서 제공하는 다양한 설정 옵션을 확인하실 수 있습니다.