Chartist는 유연하고 간편한 차트 라이브러리입니다. Chartist를 사용하여 차트의 크기와 여백을 조정하는 방법을 알아보겠습니다.

차트의 크기 조정하기

Chartist를 사용하면 차트의 크기를 조정할 수 있습니다. 다음은 차트의 너비를 500px, 높이를 300px로 설정하는 예제입니다.

new Chartist.Line('.ct-chart', data, {
  width: 500,
  height: 300
});

위의 예제에서 ‘.ct-chart’는 차트를 넣을 요소의 CSS 선택자를 의미합니다. data는 차트에 표시할 데이터입니다.

여백 조정하기

차트의 여백은 Chartist.Line 생성자의 options 객체의 chartPadding 속성을 사용하여 조정할 수 있습니다. chartPadding 속성의 값을 배열로 전달하여 상, 우, 하, 좌 순서로 여백을 설정할 수 있습니다. 아래는 여백을 상하 20px, 좌우 10px로 설정하는 예제입니다.

new Chartist.Line('.ct-chart', data, {
  chartPadding: [20, 10, 20, 10]
});

위의 예제에서 .ct-chart는 차트를 넣을 요소의 CSS 선택자를 의미합니다. data는 차트에 표시할 데이터입니다.

요약

Chartist를 사용하여 차트의 크기와 여백을 조정할 수 있습니다. width 및 height 속성을 사용하여 차트의 크기를 설정하고, chartPadding 속성을 사용하여 차트의 여백을 조정할 수 있습니다. 코드 예제를 참고하여 원하는 크기와 여백을 설정해보세요.

참고 자료

• Chartist 공식 문서