[javascript] Chartkick에서 사용 가능한 차트 축 라인 스타일 설정 방법

29 Nov 2023

javascript

Chartkick은 JavaScript 라이브러리로, 다양한 종류의 대시보드나 데이터 시각화를 손쉽게 만들 수 있습니다. 이 라이브러리를 사용하여 생성한 차트에는 축 라인(line)이 자동으로 표시됩니다. 이번 글에서는 Chartkick에서 사용 가능한 차트 축 라인 스타일을 설정하는 방법에 대해 알아보겠습니다.

1. 축 라인 스타일 설정하기

축 라인의 스타일을 설정하기 위해서는 options 객체를 사용합니다. options 객체에 axisLineColor 속성을 추가하고 원하는 색상 값을 할당하면 됩니다. 아래의 예제 코드를 살펴보겠습니다.

new Chartkick.LineChart("chart", [
  {"2022-01-01": 5, "2022-01-02": 10, "2022-01-03": 8},
  {"2022-01-01": 3, "2022-01-02": 7, "2022-01-03": 2}
], { 
  colors: ["#ff0000", "#00ff00"],
  options: {
    axisLineColor: "#0000ff"
  }
});

위의 코드로 생성된 차트의 축 라인의 색상은 파란색(#0000ff)으로 설정됩니다.

2. 기타 축 라인 스타일 설정 옵션

축 라인의 스타일을 더 세부적으로 설정하기 위해서는 axisLineStyle 속성을 사용할 수 있습니다. axisLineStyle 속성은 CSS 스타일의 속성 값을 가져야 하며, 여러 속성을 쉼표로 구분하여 지정할 수 있습니다.

new Chartkick.LineChart("chart", [
  {"2022-01-01": 5, "2022-01-02": 10, "2022-01-03": 8},
  {"2022-01-01": 3, "2022-01-02": 7, "2022-01-03": 2}
], { 
  colors: ["#ff0000", "#00ff00"],
  options: {
    axisLineStyle: "stroke-width: 2, stroke-dasharray: 5,10"
  }
});

위의 코드에서는 축 라인의 두께를 2로, 패턴을 대쉬로 설정하고 있습니다. 임의로 원하는 스타일 값을 지정하여 축 라인의 모양을 변경할 수 있습니다.

3. 참고 자료

Chartkick 공식 문서: https://chartkick.com
Chartkick GitHub 저장소: https://github.com/ankane/chartkick

위의 참고 자료들을 통해 더 자세한 정보를 얻을 수 있습니다.

이번 포스트에서는 Chartkick에서 사용 가능한 차트 축 라인 스타일 설정 방법에 대해 알아보았습니다. Chartkick을 사용하여 데이터 시각화를 할 때 축 라인의 스타일을 원하는 대로 설정하여 더욱 멋진 차트를 만들어보세요. Happy coding!