Chartkick은 JavaScript 라이브러리로, 다양한 종류의 차트를 만들기 위해 사용됩니다. 이 라이브러리를 활용하여 차트를 만들 때, 차트에 제목을 설정하는 방법을 알아보겠습니다.

제목 설정하기

차트의 제목을 설정하기 위해서는 title 옵션을 사용합니다. 예를 들어, 다음과 같이 차트를 생성할 수 있습니다:

<%= line_chart(data, { title: "월별 판매량" }) %>

위 예제에서 title 옵션의 값으로 “월별 판매량”을 설정하여 차트의 제목을 지정하였습니다.

제목 스타일 변경하기

차트의 제목에 스타일을 적용하려면 CSS를 사용하여 스타일을 변경할 수 있습니다. Chartkick은 차트에 title 클래스를 자동으로 추가하므로, 해당 클래스를 활용하여 스타일을 변경하면 됩니다. 예를 들어, 다음과 같이 CSS를 적용할 수 있습니다:

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

위 예제에서는 title 클래스에 대해 폰트 크기, 글꼴 굵기, 색상을 설정하였습니다. 이렇게 설정된 스타일은 차트의 제목에 적용됩니다.

결론

차트에 제목을 설정하는 방법에 대해 알아보았습니다. Chartkick를 사용하여 다양한 종류의 차트를 만들 때, title 옵션을 사용하여 제목을 설정할 수 있으며, CSS를 활용하여 제목의 스타일을 변경할 수 있습니다. 이를 통해 보다 멋진 차트를 만들어보세요!

참고 자료

• Chartkick 공식 문서
• Chartkick GitHub 저장소